@redis-ui/table 2.12.0 → 2.18.0

package/dist/Table/components/TableHeaderCell/components/Heading/Heading.cjs

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("../../../../../node_modules/react/jsx-runtime.cjs");
+const index = require("../../../../../node_modules/@tanstack/react-table/build/lib/index.cjs");
+const redisUiComponents = require("@redislabsdev/redis-ui-components");
+const index$1 = require("../../../../../node_modules/@radix-ui/react-visually-hidden/dist/index.cjs");
+const TableHeaderCell_context = require("../../TableHeaderCell.context.cjs");
+const Table_style = require("../../../../Table.style.cjs");
+const DEFAULT_HIDDEN_HEADER = "Actions";
+const TableHeaderCellHeading = (props) => {
+  var _a;
+  const {
+    header
+  } = TableHeaderCell_context.useTableHeaderCellContext();
+  const content = index.flexRender(header.column.columnDef.header, header.getContext());
+  if (header.column.columnDef.isHeaderCustom) return jsxRuntime.jsxRuntimeExports.jsx(jsxRuntime.jsxRuntimeExports.Fragment, {
+    children: content
+  });
+  const text = (_a = redisUiComponents.childrenToString(content)) == null ? void 0 : _a.trim();
+  if (!text || header.column.columnDef.isHeaderHidden) {
+    return jsxRuntime.jsxRuntimeExports.jsx(index$1.VisuallyHidden, {
+      children: text || DEFAULT_HIDDEN_HEADER
+    });
+  }
+  return jsxRuntime.jsxRuntimeExports.jsx(Table_style.HeaderTitleWrapper, {
+    variant: "semiBold",
+    ellipsis: true,
+    tooltipOnEllipsis: true,
+    ...props,
+    "$isTextual": redisUiComponents.isTextualNode(content),
+    children: content
+  });
+};
+exports.TableHeaderCellHeading = TableHeaderCellHeading;

package/dist/Table/components/TableHeaderCell/components/Heading/Heading.d.ts

@@ -0,0 +1,5 @@
+import { ComponentProps } from 'react';
+import { ChildFree, Typography } from '@redislabsdev/redis-ui-components';
+export type RestTableHeaderCellHeadingProps = ChildFree<ComponentProps<typeof Typography.Body>>;
+export type TableHeaderCellHeadingProps = RestTableHeaderCellHeadingProps;
+export declare const TableHeaderCellHeading: (props: TableHeaderCellHeadingProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Table/components/TableHeaderCell/components/Heading/Heading.js

@@ -0,0 +1,34 @@
+import { j as jsxRuntimeExports } from "../../../../../node_modules/react/jsx-runtime.js";
+import { flexRender } from "../../../../../node_modules/@tanstack/react-table/build/lib/index.js";
+import { childrenToString, isTextualNode } from "@redislabsdev/redis-ui-components";
+import { VisuallyHidden } from "../../../../../node_modules/@radix-ui/react-visually-hidden/dist/index.js";
+import { useTableHeaderCellContext } from "../../TableHeaderCell.context.js";
+import { HeaderTitleWrapper } from "../../../../Table.style.js";
+const DEFAULT_HIDDEN_HEADER = "Actions";
+const TableHeaderCellHeading = (props) => {
+  var _a;
+  const {
+    header
+  } = useTableHeaderCellContext();
+  const content = flexRender(header.column.columnDef.header, header.getContext());
+  if (header.column.columnDef.isHeaderCustom) return jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, {
+    children: content
+  });
+  const text = (_a = childrenToString(content)) == null ? void 0 : _a.trim();
+  if (!text || header.column.columnDef.isHeaderHidden) {
+    return jsxRuntimeExports.jsx(VisuallyHidden, {
+      children: text || DEFAULT_HIDDEN_HEADER
+    });
+  }
+  return jsxRuntimeExports.jsx(HeaderTitleWrapper, {
+    variant: "semiBold",
+    ellipsis: true,
+    tooltipOnEllipsis: true,
+    ...props,
+    "$isTextual": isTextualNode(content),
+    children: content
+  });
+};
+export {
+  TableHeaderCellHeading
+};

package/dist/Table/components/TableHeaderCell/components/SortableHeading/SortableHeading.cjs

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("../../../../../node_modules/react/jsx-runtime.cjs");
+const SortIndicator = require("./components/SortIndicator/SortIndicator.cjs");
+const Compose = require("./components/Compose/Compose.cjs");
+const SortableHeading = Object.assign(({
+  children,
+  ...restProps
+}) => jsxRuntime.jsxRuntimeExports.jsxs(SortableHeading.Compose, {
+  ...restProps,
+  children: [children, jsxRuntime.jsxRuntimeExports.jsx(SortableHeading.SortIndicator, {})]
+}), {
+  Compose: Compose.SortableHeadingCompose,
+  SortIndicator: SortIndicator.SortIndicator
+});
+exports.SortableHeading = SortableHeading;

package/dist/Table/components/TableHeaderCell/components/SortableHeading/SortableHeading.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { ComposeElementProps } from '@redislabsdev/redis-ui-components';
+export declare const SortableHeading: (({ children, ...restProps }: ComposeElementProps) => import("react/jsx-runtime").JSX.Element) & {
+    Compose: ((props: ComposeElementProps<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element) & {
+        SortIndicator: () => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+    };
+    SortIndicator: () => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+};

package/dist/Table/components/TableHeaderCell/components/SortableHeading/SortableHeading.js

@@ -0,0 +1,16 @@
+import { j as jsxRuntimeExports } from "../../../../../node_modules/react/jsx-runtime.js";
+import { SortIndicator } from "./components/SortIndicator/SortIndicator.js";
+import { SortableHeadingCompose } from "./components/Compose/Compose.js";
+const SortableHeading = Object.assign(({
+  children,
+  ...restProps
+}) => jsxRuntimeExports.jsxs(SortableHeading.Compose, {
+  ...restProps,
+  children: [children, jsxRuntimeExports.jsx(SortableHeading.SortIndicator, {})]
+}), {
+  Compose: SortableHeadingCompose,
+  SortIndicator
+});
+export {
+  SortableHeading
+};

package/dist/Table/components/TableHeaderCell/components/SortableHeading/components/Compose/Compose.cjs

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("../../../../../../../node_modules/react/jsx-runtime.cjs");
+const TableHeaderCell_utils = require("../../../../TableHeaderCell.utils.cjs");
+const TableHeaderCell_context = require("../../../../TableHeaderCell.context.cjs");
+const SortIndicator = require("../SortIndicator/SortIndicator.cjs");
+const Table_style = require("../../../../../../Table.style.cjs");
+const SortableHeadingCompose = Object.assign((props) => {
+  const {
+    header
+  } = TableHeaderCell_context.useTableHeaderCellContext();
+  return jsxRuntime.jsxRuntimeExports.jsx(
+    Table_style.SortableHeadingCompose,
+    {
+      "aria-description": TableHeaderCell_utils.getColumnSortLabel(header, TableHeaderCell_utils.formatColumnSortNotification),
+      ...props,
+      as: header.column.getCanSort() ? void 0 : "div"
+    }
+  );
+}, {
+  SortIndicator: SortIndicator.SortIndicator
+});
+exports.SortableHeadingCompose = SortableHeadingCompose;

package/dist/Table/components/TableHeaderCell/components/SortableHeading/components/Compose/Compose.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { ComposeElementProps } from '@redislabsdev/redis-ui-components';
+export declare const SortableHeadingCompose: ((props: ComposeElementProps) => import("react/jsx-runtime").JSX.Element) & {
+    SortIndicator: () => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+};

package/dist/Table/components/TableHeaderCell/components/SortableHeading/components/Compose/Compose.js

@@ -0,0 +1,23 @@
+import { j as jsxRuntimeExports } from "../../../../../../../node_modules/react/jsx-runtime.js";
+import { getColumnSortLabel, formatColumnSortNotification } from "../../../../TableHeaderCell.utils.js";
+import { useTableHeaderCellContext } from "../../../../TableHeaderCell.context.js";
+import { SortIndicator } from "../SortIndicator/SortIndicator.js";
+import { SortableHeadingCompose as SortableHeadingCompose$1 } from "../../../../../../Table.style.js";
+const SortableHeadingCompose = Object.assign((props) => {
+  const {
+    header
+  } = useTableHeaderCellContext();
+  return jsxRuntimeExports.jsx(
+    SortableHeadingCompose$1,
+    {
+      "aria-description": getColumnSortLabel(header, formatColumnSortNotification),
+      ...props,
+      as: header.column.getCanSort() ? void 0 : "div"
+    }
+  );
+}, {
+  SortIndicator
+});
+export {
+  SortableHeadingCompose
+};

package/dist/Table/components/TableHeaderCell/components/SortableHeading/components/SortIndicator/SortIndicator.cjs

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const TableHeaderCell_utils = require("../../../../TableHeaderCell.utils.cjs");
+const TableHeaderCell_context = require("../../../../TableHeaderCell.context.cjs");
+const SortIndicator = () => TableHeaderCell_utils.getSortSign(TableHeaderCell_context.useTableHeaderCellContext().header);
+exports.SortIndicator = SortIndicator;

package/dist/Table/components/TableHeaderCell/components/SortableHeading/components/SortIndicator/SortIndicator.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const SortIndicator: () => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;

package/dist/Table/components/TableHeaderCell/components/SortableHeading/components/SortIndicator/SortIndicator.js

@@ -0,0 +1,6 @@
+import { getSortSign } from "../../../../TableHeaderCell.utils.js";
+import { useTableHeaderCellContext } from "../../../../TableHeaderCell.context.js";
+const SortIndicator = () => getSortSign(useTableHeaderCellContext().header);
+export {
+  SortIndicator
+};

package/dist/Table/components/TableHeaderRow/TableHeaderRow.cjs

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("../../../node_modules/react/jsx-runtime.cjs");
+const redisUiComponents = require("@redislabsdev/redis-ui-components");
+const TableHeaderCell = require("../TableHeaderCell/TableHeaderCell.cjs");
+const Compose = require("./components/Compose/Compose.cjs");
+const Table_context = require("../../Table.context.cjs");
+const TableHeaderRow = Object.assign(redisUiComponents.forwardRefWithGenerics(({
+  headerGroup,
+  ...restProps
+}, ref) => {
+  const {
+    TableHeaderCell: Cell
+  } = Table_context.useComposeContext({
+    TableHeaderCell: TableHeaderCell.TableHeaderCell
+  });
+  return jsxRuntime.jsxRuntimeExports.jsx(TableHeaderRow.Compose, {
+    ...restProps,
+    ref,
+    children: headerGroup.headers.map((header) => jsxRuntime.jsxRuntimeExports.jsx(Cell, {
+      header
+    }, header.id))
+  });
+}), {
+  Compose: Compose.TableHeaderRowCompose
+});
+exports.TableHeaderRow = TableHeaderRow;

package/dist/Table/components/TableHeaderRow/TableHeaderRow.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { HeaderGroup } from '@tanstack/react-table';
+import { ChildFree } from '@redislabsdev/redis-ui-components';
+import { TableHeaderRowComposeProps } from './components/Compose/Compose';
+export type OwnTableHeaderRowProps<T extends object> = {
+    headerGroup: HeaderGroup<T>;
+};
+export type RestTableHeaderRowProps = ChildFree<TableHeaderRowComposeProps>;
+export type TableHeaderRowProps<T extends object> = OwnTableHeaderRowProps<T> & RestTableHeaderRowProps;
+export declare const TableHeaderRow: (<T extends object>(props: OwnTableHeaderRowProps<T> & RestTableHeaderRowProps & import("react").RefAttributes<HTMLTableRowElement>) => import("react").ReactElement<any, any> | null) & {
+    Compose: import("styled-components").StyledComponent<"tr", any, {}, never>;
+};

package/dist/Table/components/TableHeaderRow/TableHeaderRow.js

@@ -0,0 +1,27 @@
+import { j as jsxRuntimeExports } from "../../../node_modules/react/jsx-runtime.js";
+import { forwardRefWithGenerics } from "@redislabsdev/redis-ui-components";
+import { TableHeaderCell } from "../TableHeaderCell/TableHeaderCell.js";
+import { TableHeaderRowCompose } from "./components/Compose/Compose.js";
+import { useComposeContext } from "../../Table.context.js";
+const TableHeaderRow = Object.assign(forwardRefWithGenerics(({
+  headerGroup,
+  ...restProps
+}, ref) => {
+  const {
+    TableHeaderCell: Cell
+  } = useComposeContext({
+    TableHeaderCell
+  });
+  return jsxRuntimeExports.jsx(TableHeaderRow.Compose, {
+    ...restProps,
+    ref,
+    children: headerGroup.headers.map((header) => jsxRuntimeExports.jsx(Cell, {
+      header
+    }, header.id))
+  });
+}), {
+  Compose: TableHeaderRowCompose
+});
+export {
+  TableHeaderRow
+};

package/dist/Table/components/TableHeaderRow/components/Compose/Compose.cjs

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const Table_style = require("../../../../Table.style.cjs");
+const TableHeaderRowCompose = Table_style.TableHeaderRow;
+exports.TableHeaderRowCompose = TableHeaderRowCompose;

package/dist/Table/components/TableHeaderRow/components/Compose/Compose.d.ts

@@ -0,0 +1,3 @@
+import { ComposeElementProps } from '@redislabsdev/redis-ui-components';
+export type TableHeaderRowComposeProps = ComposeElementProps<HTMLTableRowElement>;
+export declare const TableHeaderRowCompose: import("styled-components").StyledComponent<"tr", any, {}, never>;

package/dist/Table/components/TableHeaderRow/components/Compose/Compose.js

@@ -0,0 +1,5 @@
+import { TableHeaderRow } from "../../../../Table.style.js";
+const TableHeaderRowCompose = TableHeaderRow;
+export {
+  TableHeaderRowCompose
+};

package/dist/Table/components/TablePagination/TablePagination.cjs

@@ -1,112 +1,78 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const jsxRuntime = require("../../../node_modules/react/jsx-runtime.cjs");
-const redisUiIcons = require("@redislabsdev/redis-ui-icons");
-const index = require("../../../node_modules/@radix-ui/react-id/dist/index.cjs");
-const Table_context = require("../../Table.context.cjs");
+const redisUiComponents = require("@redislabsdev/redis-ui-components");
+const PaginationPlugin = require("../../plugins/PaginationPlugin.cjs");
+const Compose = require("./components/Compose/Compose.cjs");
 const TablePagination_style = require("./TablePagination.style.cjs");
-const DEFAULT_PAGE_SIZES = [10, 25, 50, 100];
-const TablePagination = ({
-  pageSizes = DEFAULT_PAGE_SIZES
-}) => {
-  const {
-    table
-  } = Table_context.useTableContext();
-  const perPageId = index.useId();
-  const pageNumId = index.useId();
-  if (!table._getPaginationRowModel) {
+const renderRowCount = ({
+  visibleItemCount,
+  totalItemCount
+}) => `Showing ${visibleItemCount} out of ${totalItemCount} rows`;
+const renderPageCount = ({
+  pageIndex,
+  pageCount
+}) => `${pageIndex + 1} of ${pageCount}`;
+const renderTotalPageCount = ({
+  pageCount
+}) => `of ${pageCount}`;
+const TablePagination = Object.assign(() => {
+  const pagination = PaginationPlugin.usePaginationContext();
+  if (!pagination) {
     return null;
   }
-  const {
-    pageIndex,
-    pageSize
-  } = table.getState().pagination;
-  const totalRowCount = table.getRowCount();
-  const pageCount = Math.max(table.getPageCount(), 1);
-  const handlePageSizeChange = (value) => {
-    table.setPageSize(Number(value));
-  };
-  const handlePageIndexChange = (index2) => {
-    table.setPageIndex(index2);
-  };
-  return jsxRuntime.jsxRuntimeExports.jsx(TablePagination_style.PaginationRow, {
-    "data-role": "pagination",
-    children: jsxRuntime.jsxRuntimeExports.jsxs(jsxRuntime.jsxRuntimeExports.Fragment, {
-      children: [jsxRuntime.jsxRuntimeExports.jsxs(TablePagination_style.CountInfo, {
-        children: ["Showing ", table.getRowModel().rows.length, " out of ", totalRowCount, " rows"]
-      }), jsxRuntime.jsxRuntimeExports.jsxs("div", {
-        style: {
-          display: "flex",
-          alignItems: "center",
-          gap: "1rem"
-        },
-        children: [jsxRuntime.jsxRuntimeExports.jsx(TablePagination_style.ItemPerPageText, {
-          children: jsxRuntime.jsxRuntimeExports.jsx(TablePagination_style.Label, {
-            htmlFor: perPageId,
-            children: "Items per page:"
-          })
-        }), jsxRuntime.jsxRuntimeExports.jsx(TablePagination_style.Select, {
-          id: perPageId,
-          value: pageSize.toString(),
-          onChange: handlePageSizeChange,
-          disabled: pageSizes[0] > totalRowCount,
-          options: pageSizes.map(String).map((value) => ({
-            value
-          }))
+  return jsxRuntime.jsxRuntimeExports.jsx(TablePagination.Compose, {
+    children: jsxRuntime.jsxRuntimeExports.jsxs(TablePagination.Bar, {
+      "data-role": "pagination",
+      children: [jsxRuntime.jsxRuntimeExports.jsx(TablePagination.InfoLabel, {
+        renderer: renderRowCount,
+        ellipsis: true,
+        tooltipOnEllipsis: true
+      }), jsxRuntime.jsxRuntimeExports.jsx(TablePagination.Split, {}), jsxRuntime.jsxRuntimeExports.jsxs(TablePagination.PageSizeGroup, {
+        children: [jsxRuntime.jsxRuntimeExports.jsx(TablePagination.PageSizeSelect.Label, {
+          children: "Items per page:"
+        }), jsxRuntime.jsxRuntimeExports.jsx(TablePagination.PageSizeSelect, {
+          pageSizes: pagination.pageSizes
         })]
-      }), jsxRuntime.jsxRuntimeExports.jsxs(TablePagination_style.PaginationActions, {
-        children: [jsxRuntime.jsxRuntimeExports.jsx(TablePagination_style.PaginationIconButton, {
-          icon: redisUiIcons.DoubleChevronLeftIcon,
-          size: "S",
-          onClick: () => handlePageIndexChange(0),
-          disabled: pageIndex === 0,
-          title: "First page",
-          "aria-label": "first page"
-        }), jsxRuntime.jsxRuntimeExports.jsx(TablePagination_style.PaginationIconButton, {
-          icon: redisUiIcons.ChevronLeftIcon,
-          size: "S",
-          onClick: () => handlePageIndexChange(pageIndex - 1),
-          disabled: pageIndex === 0,
-          title: "Previous page",
-          "aria-label": "previous page"
-        }), jsxRuntime.jsxRuntimeExports.jsxs(TablePagination_style.PaginationIndexText, {
-          size: "S",
-          children: [pageIndex + 1, " of ", pageCount]
-        }), jsxRuntime.jsxRuntimeExports.jsx(TablePagination_style.PaginationIconButton, {
-          icon: redisUiIcons.ChevronRightIcon,
-          size: "S",
-          onClick: () => handlePageIndexChange(pageIndex + 1),
-          disabled: pageIndex === pageCount - 1,
-          title: "Next page",
-          "aria-label": "next page"
-        }), jsxRuntime.jsxRuntimeExports.jsx(TablePagination_style.PaginationIconButton, {
-          icon: redisUiIcons.DoubleChevronRightIcon,
-          size: "S",
-          onClick: () => handlePageIndexChange(pageCount - 1),
-          disabled: pageIndex === pageCount - 1,
-          title: "Last page",
-          "aria-label": "last page"
+      }), jsxRuntime.jsxRuntimeExports.jsxs(TablePagination.PageNavGroup, {
+        children: [jsxRuntime.jsxRuntimeExports.jsxs("div", {
+          children: [jsxRuntime.jsxRuntimeExports.jsx(TablePagination.NavigationButton, {
+            navType: "first"
+          }), jsxRuntime.jsxRuntimeExports.jsx(TablePagination.NavigationButton, {
+            navType: "prev"
+          })]
+        }), jsxRuntime.jsxRuntimeExports.jsx(TablePagination.InfoLabel, {
+          ellipsis: true,
+          tooltipOnEllipsis: true,
+          renderer: renderPageCount
+        }), jsxRuntime.jsxRuntimeExports.jsxs("div", {
+          children: [jsxRuntime.jsxRuntimeExports.jsx(TablePagination.NavigationButton, {
+            navType: "next"
+          }), jsxRuntime.jsxRuntimeExports.jsx(TablePagination.NavigationButton, {
+            navType: "last"
+          })]
         })]
-      }), jsxRuntime.jsxRuntimeExports.jsxs(TablePagination_style.PaginationActions, {
-        children: [jsxRuntime.jsxRuntimeExports.jsx(TablePagination_style.PageLabelText, {
-          children: jsxRuntime.jsxRuntimeExports.jsx(TablePagination_style.Label, {
-            htmlFor: pageNumId,
-            children: "Page"
-          })
-        }), jsxRuntime.jsxRuntimeExports.jsx(TablePagination_style.Select, {
-          id: pageNumId,
-          value: (pageIndex + 1).toString(),
-          onChange: (value) => handlePageIndexChange(Number(value) - 1),
-          options: Array.from({
-            length: pageCount
-          }, (_, i) => String(i + 1)).map((value) => ({
-            value
-          }))
-        }), jsxRuntime.jsxRuntimeExports.jsxs(TablePagination_style.TotalPagesText, {
-          children: ["of ", pageCount]
+      }), jsxRuntime.jsxRuntimeExports.jsxs(TablePagination.PageSelectGroup, {
+        children: [jsxRuntime.jsxRuntimeExports.jsx(TablePagination.PageSelect.Label, {
+          children: "Page"
+        }), jsxRuntime.jsxRuntimeExports.jsx(TablePagination.PageSelect, {}), jsxRuntime.jsxRuntimeExports.jsx(TablePagination.InfoLabel, {
+          ellipsis: true,
+          tooltipOnEllipsis: true,
+          renderer: renderTotalPageCount
         })]
       })]
     })
   });
-};
+}, {
+  Compose: Compose.TablePaginationCompose,
+  Bar: TablePagination_style.PaginationBar,
+  Split: redisUiComponents.Pagination.Split,
+  InfoLabel: TablePagination_style.InfoLabel,
+  PageSelect: TablePagination_style.PageSelect,
+  PageSizeSelect: TablePagination_style.PageSizeSelect,
+  NavigationButton: TablePagination_style.NavigationButton,
+  PageSizeGroup: TablePagination_style.PageSizeGroup,
+  PageNavGroup: TablePagination_style.PageNavGroup,
+  PageSelectGroup: TablePagination_style.PageSelectGroup
+});
 exports.default = TablePagination;

package/dist/Table/components/TablePagination/TablePagination.d.ts

@@ -1,4 +1,24 @@
-declare const TablePagination: ({ pageSizes }: {
-    pageSizes?: number[] | undefined;
-}) => import("react/jsx-runtime").JSX.Element | null;
+import { PaginationInfoLabelProps } from '@redislabsdev/redis-ui-components';
+declare const TablePagination: (() => import("react/jsx-runtime").JSX.Element | null) & {
+    Compose: ({ children }: import("@redislabsdev/redis-ui-components").ComposeChildrenProps) => import("react/jsx-runtime").JSX.Element | null;
+    Bar: import("styled-components").StyledComponent<"nav", any, {
+        'aria-label': string;
+    } & {
+        'aria-label': string;
+    }, "aria-label">;
+    Split: import("styled-components").StyledComponent<"div", any, {}, never>;
+    InfoLabel: import("styled-components").StyledComponent<({ renderer, ...restProps }: PaginationInfoLabelProps) => import("react/jsx-runtime").JSX.Element, any, {}, never>;
+    PageSelect: import("styled-components").StyledComponent<{
+        ({ ...restProps }: import("@redislabsdev/redis-ui-components").PaginationPageSelectProps): import("react/jsx-runtime").JSX.Element;
+        Label: ({ children, ...restProps }: import("@redislabsdev/redis-ui-components").TypographyBodyProps) => import("react/jsx-runtime").JSX.Element;
+    }, any, {}, never>;
+    PageSizeSelect: import("styled-components").StyledComponent<{
+        ({ pageSizes, ...restProps }: import("@redislabsdev/redis-ui-components").PaginationPageSizeSelectProps): import("react/jsx-runtime").JSX.Element | null;
+        Label: ({ children, ...restProps }: import("@redislabsdev/redis-ui-components").TypographyBodyProps) => import("react/jsx-runtime").JSX.Element | null;
+    }, any, {}, never>;
+    NavigationButton: import("styled-components").StyledComponent<({ navType, ...restProps }: import("@redislabsdev/redis-ui-components").PaginationNavigationButtonProps) => import("react/jsx-runtime").JSX.Element, any, {}, never>;
+    PageSizeGroup: import("styled-components").StyledComponent<"div", any, {}, never>;
+    PageNavGroup: import("styled-components").StyledComponent<"div", any, {}, never>;
+    PageSelectGroup: import("styled-components").StyledComponent<"div", any, {}, never>;
+};
 export default TablePagination;