@redis-ui/components 39.12.0 → 41.3.2

package/dist/Pagination/Pagination.d.ts

@@ -0,0 +1,18 @@
+export declare const Pagination: {
+    Compose: ({ children, pageIndex, pageSize, pageCount, totalItemCount, visibleItemCount, getCanGoNextPage, getCanGoPrevPage, getCanSelectPage, getCanSelectPageSize, onPageSizeChange, onPageChange, onNextPage, onFirstPage, onPrevPage, onLastPage }: import("./components/Compose").PaginationComposeProps) => import("react/jsx-runtime").JSX.Element;
+    NavigationButton: ({ navType, ...restProps }: import("./components/NavigationButton").PaginationNavigationButtonProps) => import("react/jsx-runtime").JSX.Element;
+    Bar: import("styled-components").StyledComponent<"nav", any, {
+        'aria-label': string;
+    }, "aria-label">;
+    Group: import("styled-components").StyledComponent<"div", any, {}, never>;
+    Split: import("styled-components").StyledComponent<"div", any, {}, never>;
+    InfoLabel: ({ renderer, ...restProps }: import("./components/InfoLabel").PaginationInfoLabelProps) => import("react/jsx-runtime").JSX.Element;
+    PageSizeSelect: {
+        ({ pageSizes, ...restProps }: import("./components/PageSizeSelect").PaginationPageSizeSelectProps): import("react/jsx-runtime").JSX.Element | null;
+        Label: ({ children, ...restProps }: import("..").TypographyBodyProps) => import("react/jsx-runtime").JSX.Element | null;
+    };
+    PageSelect: {
+        ({ ...restProps }: import("./components/PageSelect").PaginationPageSelectProps): import("react/jsx-runtime").JSX.Element;
+        Label: ({ children, ...restProps }: import("..").TypographyBodyProps) => import("react/jsx-runtime").JSX.Element;
+    };
+};

package/dist/Pagination/Pagination.js

@@ -0,0 +1,19 @@
+import { PaginationCompose } from "./components/Compose.js";
+import { NavigationButton } from "./components/NavigationButton.js";
+import { InfoLabel } from "./components/InfoLabel.js";
+import { PageSizeSelect } from "./components/PageSizeSelect.js";
+import { PageSelect } from "./components/PageSelect.js";
+import { Bar, Group, Split } from "./Pagination.style.js";
+const Pagination = {
+  Compose: PaginationCompose,
+  NavigationButton,
+  Bar,
+  Group,
+  Split,
+  InfoLabel,
+  PageSizeSelect,
+  PageSelect
+};
+export {
+  Pagination
+};

package/dist/Pagination/Pagination.style.cjs

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const _styled = require("styled-components");
+const Select$1 = require("../Select/Select.cjs");
+const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
+const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
+const Bar = _styled__default.default.nav.attrs(({
+  "aria-label": al
+}) => ({
+  "aria-label": al ?? "Pagination"
+})).withConfig({
+  displayName: "Paginationstyle__Bar",
+  componentId: "RedisUI__sc-gd6oof-0"
+})(["display:flex;align-items:center;width:100%;> button{flex:none;}"]);
+const Select = _styled__default.default(Select$1.default).withConfig({
+  displayName: "Paginationstyle__Select",
+  componentId: "RedisUI__sc-gd6oof-1"
+})(["flex:none;width:unset;"]);
+const Group = _styled__default.default.div.withConfig({
+  displayName: "Paginationstyle__Group",
+  componentId: "RedisUI__sc-gd6oof-2"
+})(["display:flex;align-items:center;gap:0.4rem;"]);
+const Split = _styled__default.default.div.withConfig({
+  displayName: "Paginationstyle__Split",
+  componentId: "RedisUI__sc-gd6oof-3"
+})(["display:contents;&:first-child + *{margin-inline-start:auto;}*:has(+ &){margin-inline-end:auto;}"]);
+const Label = _styled__default.default.label.withConfig({
+  displayName: "Paginationstyle__Label",
+  componentId: "RedisUI__sc-gd6oof-4"
+})(["all:unset;"]);
+exports.Bar = Bar;
+exports.Group = Group;
+exports.Label = Label;
+exports.Select = Select;
+exports.Split = Split;

package/dist/Pagination/Pagination.style.d.ts

@@ -0,0 +1,40 @@
+/// <reference types="react" />
+export declare const Bar: import("styled-components").StyledComponent<"nav", any, {
+    'aria-label': string;
+}, "aria-label">;
+export declare const Select: import("styled-components").StyledComponent<(<TValue extends string = string, TOption extends import("../Select").SelectOption<TValue> = import("../Select").SelectOption<TValue>>({ options, disabled, defaultOpen, open, onOpenChange, defaultValue, value, onChange, customCompare, error, valid, valueRender, searchable, placement, maxVisibleItems, placeholder, virtualized, contentWidth, ...restProps }: import("../Select/components/Compose/Compose.types").SelectComposeProps<TValue, TOption> & Omit<import("../Select/components/Trigger/components/Compose/Compose.types").SelectTriggerComposeProps, "customContainer"> & import("../Select/components/Trigger/components/Value/Value.types").SelectTriggerValueProps<TOption> & {
+    allowReset?: boolean | undefined;
+    loading?: boolean | undefined;
+} & Omit<import("../Select/components/Content/Content.types").SelectContentProps<TOption>, "optionComponent" | "optionValueRender"> & import("../Select/components/Trigger/components/Compose/Compose.types").RestSelectTriggerComposeProps) => import("react/jsx-runtime").JSX.Element) & {
+    Compose: <TValue_1 extends string = string, TOption_1 extends import("../Select").SelectOption<TValue_1> = import("../Select").SelectOption<TValue_1>>({ options, children, onOpenChange, defaultValue, value, onChange, customCompare, error, valid, disabled, ...restProps }: import("../Select/components/Compose/Compose.types").SelectComposeProps<TValue_1, TOption_1> & import("..").ComposeChildrenProps) => import("react/jsx-runtime").JSX.Element;
+    Trigger: (<TOption_2 extends import("../Select").SelectOption<string> = import("../Select").SelectOption<string>>({ placeholder, valueRender, allowReset, loading, ...props }: Omit<import("../Select/components/Trigger/components/Compose/Compose.types").SelectTriggerComposeProps, "customContainer"> & import("../Select/components/Trigger/components/Value/Value.types").SelectTriggerValueProps<TOption_2> & {
+        allowReset?: boolean | undefined;
+        loading?: boolean | undefined;
+    } & import("../Select/components/Trigger/components/Compose/Compose.types").RestSelectTriggerComposeProps) => import("react/jsx-runtime").JSX.Element) & {
+        Compose: ({ customContainer, id, ...restProps }: import("../Select/components/Trigger/components/Compose/Compose.types").SelectTriggerComposeProps & import("../Select/components/Trigger/components/Compose/Compose.types").RestSelectTriggerComposeProps & import("..").ComposeChildrenProps) => import("react/jsx-runtime").JSX.Element;
+        Value: <TOption_3 extends import("../Select").SelectOption<string> = import("../Select").SelectOption<string>>({ placeholder, valueRender, ...restProps }: import("../Select/components/Trigger/components/Value/Value.types").SelectTriggerValueProps<TOption_3> & import("../Select/components/Trigger/components/Value/Value.types").RestSelectTriggerValueProps) => import("react/jsx-runtime").JSX.Element;
+        ResetButton: ({ children, title, ...restProps }: import("react").HTMLAttributes<HTMLButtonElement>) => import("react/jsx-runtime").JSX.Element | null;
+        StatusIndicator: ({ className, style, size, ...restProps }: import("@redislabsdev/redis-ui-icons/monochrome").MonochromeIconProps & Pick<import("react").HTMLAttributes<unknown>, "style" | "className">) => import("react/jsx-runtime").JSX.Element | null;
+        LoadingIndicator: ({ loading, ...restProps }: import("../Inputs/components/LoadingIndicator/LoadingIndicator.types").LoadingIndicatorProps & import("../Inputs/components/LoadingIndicator/LoadingIndicator.types").RestLoadingIndicatorProps) => import("react/jsx-runtime").JSX.Element | null;
+        Arrow: ({ icon, ...restProps }: import("../Select/components/Trigger/components/Arrow/Arrow.types").TriggerArrowProps) => import("react/jsx-runtime").JSX.Element;
+        ErrorIcon: ({ className, style, size, ...restProps }: import("@redislabsdev/redis-ui-icons/monochrome").MonochromeIconProps & Pick<import("react").HTMLAttributes<unknown>, "style" | "className">) => import("react/jsx-runtime").JSX.Element | null;
+    };
+    Content: (<TOption_4 extends import("../Select").SelectOption<string> = import("../Select").SelectOption<string>>({ searchable, optionValueRender, optionComponent, maxVisibleItems, virtualized, ...restProps }: import("../Select/components/Content/components/Compose/Compose.types").SelectContentComposeProps & import("../Select/components/Content/components/OptionList/OptionList.types").OptionListProps<TOption_4> & {
+        searchable?: boolean | undefined;
+    } & import("../Select/components/Content/components/Compose/Compose.types").RestSelectContentComposeProps) => import("react/jsx-runtime").JSX.Element) & {
+        Compose: ({ children, placement, contentWidth, ...restProps }: import("../Select/components/Content/components/Compose/Compose.types").SelectContentComposeProps & import("../Select/components/Content/components/Compose/Compose.types").RestSelectContentComposeProps & import("..").ComposeChildrenProps) => import("react/jsx-runtime").JSX.Element;
+        OptionList: <TOption_5 extends import("../Select").SelectOption<string> = import("../Select").SelectOption<string>>({ optionValueRender, optionComponent: OptionComponent, maxVisibleItems, virtualized, ...restProps }: import("../Select/components/Content/components/OptionList/OptionList.types").OptionListProps<TOption_5> & import("../Select/components/Content/components/OptionList/OptionList.types").RestOptionListProps) => import("react/jsx-runtime").JSX.Element;
+        Search: import("react").ForwardRefExoticComponent<Omit<import("../Inputs/components/Compose/TextCompose.types").TextInputComposeProps, "readOnly" | "parser" | "formatter"> & import("../Inputs/components/InputTag/InputTag.types").InputTagProps & import("../Inputs/components/LoadingIndicator/LoadingIndicator.types").LoadingIndicatorProps & import("../Inputs/components/ResetButton/ResetButton.types").ResetButtonProps & import("..").RestInputProps & import("react").RefAttributes<HTMLInputElement>>;
+        Footer: import("styled-components").StyledComponent<"div", any, {}, never>;
+    };
+    Option: (<TOption_6 extends import("../Select").SelectOption<string> = import("../Select").SelectOption<string>>({ option, content, ...restProps }: import("../Select/components/Content/components/Option/components/Compose/Compose.types").SelectOptionComposeProps<TOption_6> & {
+        content?: import("react").ReactNode;
+    } & import("../Select/components/Content/components/Option/components/Compose/Compose.types").RestSelectOptionComposeProps) => import("react/jsx-runtime").JSX.Element) & {
+        Compose: import("react").ForwardRefExoticComponent<import("../Select/components/Content/components/Option/components/Compose/Compose.types").SelectOptionComposeProps<import("../Select").SelectOption<string>> & import("../Select/components/Content/components/Option/components/Compose/Compose.types").RestSelectOptionComposeProps & import("..").ComposeChildrenProps & import("react").RefAttributes<HTMLDivElement>>;
+        Content: (props: import("..").ComposeChildrenProps & import("../Select/components/Content/components/Option/components/Content/Content.types").RestSelectOptionContentProps) => import("react/jsx-runtime").JSX.Element;
+        Indicator: ({ children, ...restProps }: import("@radix-ui/react-select").SelectItemIndicatorProps) => import("react/jsx-runtime").JSX.Element;
+    };
+}, any, {}, never>;
+export declare const Group: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Split: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Label: import("styled-components").StyledComponent<"label", any, {}, never>;

package/dist/Pagination/Pagination.style.js

@@ -0,0 +1,33 @@
+import _styled from "styled-components";
+import SelectComponent from "../Select/Select.js";
+const Bar = _styled.nav.attrs(({
+  "aria-label": al
+}) => ({
+  "aria-label": al ?? "Pagination"
+})).withConfig({
+  displayName: "Paginationstyle__Bar",
+  componentId: "RedisUI__sc-gd6oof-0"
+})(["display:flex;align-items:center;width:100%;> button{flex:none;}"]);
+const Select = _styled(SelectComponent).withConfig({
+  displayName: "Paginationstyle__Select",
+  componentId: "RedisUI__sc-gd6oof-1"
+})(["flex:none;width:unset;"]);
+const Group = _styled.div.withConfig({
+  displayName: "Paginationstyle__Group",
+  componentId: "RedisUI__sc-gd6oof-2"
+})(["display:flex;align-items:center;gap:0.4rem;"]);
+const Split = _styled.div.withConfig({
+  displayName: "Paginationstyle__Split",
+  componentId: "RedisUI__sc-gd6oof-3"
+})(["display:contents;&:first-child + *{margin-inline-start:auto;}*:has(+ &){margin-inline-end:auto;}"]);
+const Label = _styled.label.withConfig({
+  displayName: "Paginationstyle__Label",
+  componentId: "RedisUI__sc-gd6oof-4"
+})(["all:unset;"]);
+export {
+  Bar,
+  Group,
+  Label,
+  Select,
+  Split
+};

package/dist/Pagination/Pagination.types.d.ts

@@ -0,0 +1,26 @@
+import { SetOptional } from 'type-fest';
+export type PaginationState = {
+    pageIndex: number;
+    pageSize: number;
+    pageCount: number;
+    totalItemCount?: number;
+    visibleItemCount?: number;
+};
+export type PaginationStateValidation = {
+    getCanGoNextPage?: () => boolean;
+    getCanGoPrevPage?: () => boolean;
+    getCanSelectPage?: () => boolean;
+    getCanSelectPageSize?: () => boolean;
+};
+export type PaginationEvents = {
+    onPageSizeChange?: (count: number) => void;
+    onPageChange: (page: number) => void;
+    onNextPage?: () => void;
+    onPrevPage?: () => void;
+    onFirstPage?: () => void;
+    onLastPage?: () => void;
+};
+export type PaginationContextProps = PaginationState & Required<PaginationStateValidation> & SetOptional<Required<PaginationEvents>, 'onPageSizeChange'> & {
+    pageSelectorId?: string;
+    pageSizeSelectorId?: string;
+};

package/dist/Pagination/components/Compose.cjs

@@ -0,0 +1,53 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("../../node_modules/react/jsx-runtime.cjs");
+const index = require("../../node_modules/@radix-ui/react-id/dist/index.cjs");
+const Pagination_context = require("../Pagination.context.cjs");
+const PaginationCompose = ({
+  children,
+  pageIndex,
+  pageSize,
+  pageCount,
+  totalItemCount,
+  visibleItemCount,
+  getCanGoNextPage,
+  getCanGoPrevPage,
+  getCanSelectPage,
+  getCanSelectPageSize,
+  onPageSizeChange,
+  onPageChange,
+  onNextPage,
+  onFirstPage,
+  onPrevPage,
+  onLastPage
+}) => {
+  pageSize = Math.max(pageSize, 1);
+  pageCount = Math.max(pageCount, 0);
+  pageIndex = Math.max(0, Math.min(pageIndex, pageCount - 1));
+  const pageSizeSelectorId = index.useId();
+  const pageSelectorId = index.useId();
+  const context = {
+    pageSelectorId,
+    pageSizeSelectorId,
+    pageIndex,
+    pageSize,
+    pageCount,
+    totalItemCount,
+    visibleItemCount,
+    getCanGoNextPage: getCanGoNextPage ?? (() => pageIndex < pageCount - 1),
+    getCanGoPrevPage: getCanGoPrevPage ?? (() => pageIndex > 0),
+    getCanSelectPage: getCanSelectPage ?? (() => pageCount > 1),
+    getCanSelectPageSize: getCanSelectPageSize ?? (() => !!(totalItemCount !== 0 && onPageSizeChange)),
+    onPageSizeChange,
+    onPageChange,
+    onNextPage: onNextPage ?? (() => onPageChange(pageIndex + 1)),
+    onFirstPage: onFirstPage ?? (() => onPageChange(0)),
+    onPrevPage: onPrevPage ?? (() => onPageChange(pageIndex - 1)),
+    onLastPage: onLastPage ?? (() => onPageChange(pageCount - 1))
+  };
+  return jsxRuntime.jsxRuntimeExports.jsx(Pagination_context.PaginationContextProvider, {
+    value: context,
+    children
+  });
+};
+exports.PaginationCompose = PaginationCompose;

package/dist/Pagination/components/Compose.d.ts

@@ -0,0 +1,5 @@
+import { ComposeChildrenProps } from '../../Helpers';
+import { PaginationEvents, PaginationState, PaginationStateValidation } from '../Pagination.types';
+export interface PaginationComposeProps extends ComposeChildrenProps, PaginationEvents, PaginationStateValidation, PaginationState {
+}
+export declare const PaginationCompose: ({ children, pageIndex, pageSize, pageCount, totalItemCount, visibleItemCount, getCanGoNextPage, getCanGoPrevPage, getCanSelectPage, getCanSelectPageSize, onPageSizeChange, onPageChange, onNextPage, onFirstPage, onPrevPage, onLastPage }: PaginationComposeProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Pagination/components/Compose.js

@@ -0,0 +1,53 @@
+import { j as jsxRuntimeExports } from "../../node_modules/react/jsx-runtime.js";
+import { useId } from "../../node_modules/@radix-ui/react-id/dist/index.js";
+import { PaginationContextProvider } from "../Pagination.context.js";
+const PaginationCompose = ({
+  children,
+  pageIndex,
+  pageSize,
+  pageCount,
+  totalItemCount,
+  visibleItemCount,
+  getCanGoNextPage,
+  getCanGoPrevPage,
+  getCanSelectPage,
+  getCanSelectPageSize,
+  onPageSizeChange,
+  onPageChange,
+  onNextPage,
+  onFirstPage,
+  onPrevPage,
+  onLastPage
+}) => {
+  pageSize = Math.max(pageSize, 1);
+  pageCount = Math.max(pageCount, 0);
+  pageIndex = Math.max(0, Math.min(pageIndex, pageCount - 1));
+  const pageSizeSelectorId = useId();
+  const pageSelectorId = useId();
+  const context = {
+    pageSelectorId,
+    pageSizeSelectorId,
+    pageIndex,
+    pageSize,
+    pageCount,
+    totalItemCount,
+    visibleItemCount,
+    getCanGoNextPage: getCanGoNextPage ?? (() => pageIndex < pageCount - 1),
+    getCanGoPrevPage: getCanGoPrevPage ?? (() => pageIndex > 0),
+    getCanSelectPage: getCanSelectPage ?? (() => pageCount > 1),
+    getCanSelectPageSize: getCanSelectPageSize ?? (() => !!(totalItemCount !== 0 && onPageSizeChange)),
+    onPageSizeChange,
+    onPageChange,
+    onNextPage: onNextPage ?? (() => onPageChange(pageIndex + 1)),
+    onFirstPage: onFirstPage ?? (() => onPageChange(0)),
+    onPrevPage: onPrevPage ?? (() => onPageChange(pageIndex - 1)),
+    onLastPage: onLastPage ?? (() => onPageChange(pageCount - 1))
+  };
+  return jsxRuntimeExports.jsx(PaginationContextProvider, {
+    value: context,
+    children
+  });
+};
+export {
+  PaginationCompose
+};

package/dist/Pagination/components/InfoLabel.cjs

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("../../node_modules/react/jsx-runtime.cjs");
+const Pagination_context = require("../Pagination.context.cjs");
+const Typography = require("../../Typography/Typography.cjs");
+const InfoLabel = ({
+  renderer,
+  ...restProps
+}) => jsxRuntime.jsxRuntimeExports.jsx(Typography.default.Body, {
+  size: "auto",
+  ...restProps,
+  children: renderer(Pagination_context.usePaginationContext())
+});
+exports.InfoLabel = InfoLabel;

package/dist/Pagination/components/InfoLabel.d.ts

@@ -0,0 +1,8 @@
+import { ComponentProps, ReactNode } from 'react';
+import { ChildFree } from '../../Helpers';
+import { Typography } from '../../Typography';
+import { PaginationState } from '../Pagination.types';
+export type PaginationInfoLabelProps = {
+    renderer: (params: PaginationState) => ReactNode;
+} & ChildFree<ComponentProps<typeof Typography.Body>>;
+export declare const InfoLabel: ({ renderer, ...restProps }: PaginationInfoLabelProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Pagination/components/InfoLabel.js

@@ -0,0 +1,14 @@
+import { j as jsxRuntimeExports } from "../../node_modules/react/jsx-runtime.js";
+import { usePaginationContext } from "../Pagination.context.js";
+import Typography from "../../Typography/Typography.js";
+const InfoLabel = ({
+  renderer,
+  ...restProps
+}) => jsxRuntimeExports.jsx(Typography.Body, {
+  size: "auto",
+  ...restProps,
+  children: renderer(usePaginationContext())
+});
+export {
+  InfoLabel
+};

package/dist/Pagination/components/NavigationButton.cjs

@@ -0,0 +1,78 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("../../node_modules/react/jsx-runtime.cjs");
+const redisUiIcons = require("@redislabsdev/redis-ui-icons");
+const Pagination_context = require("../Pagination.context.cjs");
+const IconButton = require("../../Button/IconButton/IconButton.cjs");
+const PrevPageButton = (props) => {
+  const {
+    getCanGoPrevPage,
+    onPrevPage
+  } = Pagination_context.usePaginationContext();
+  return jsxRuntime.jsxRuntimeExports.jsx(IconButton.default, {
+    onClick: onPrevPage,
+    disabled: !getCanGoPrevPage(),
+    icon: redisUiIcons.ChevronLeftIcon,
+    title: "Previous page",
+    "aria-label": "previous page",
+    ...props
+  });
+};
+const NextPageButton = (props) => {
+  const {
+    getCanGoNextPage,
+    onNextPage
+  } = Pagination_context.usePaginationContext();
+  return jsxRuntime.jsxRuntimeExports.jsx(IconButton.default, {
+    onClick: onNextPage,
+    disabled: !getCanGoNextPage(),
+    icon: redisUiIcons.ChevronRightIcon,
+    title: "Next page",
+    "aria-label": "next page",
+    ...props
+  });
+};
+const FirstPageButton = (props) => {
+  const {
+    getCanGoPrevPage,
+    onFirstPage
+  } = Pagination_context.usePaginationContext();
+  return jsxRuntime.jsxRuntimeExports.jsx(IconButton.default, {
+    onClick: onFirstPage,
+    disabled: !getCanGoPrevPage(),
+    icon: redisUiIcons.DoubleChevronLeftIcon,
+    title: "First page",
+    "aria-label": "first page",
+    ...props
+  });
+};
+const LastPageButton = (props) => {
+  const {
+    getCanGoNextPage,
+    onLastPage
+  } = Pagination_context.usePaginationContext();
+  return jsxRuntime.jsxRuntimeExports.jsx(IconButton.default, {
+    onClick: onLastPage,
+    disabled: !getCanGoNextPage(),
+    icon: redisUiIcons.DoubleChevronRightIcon,
+    title: "Last page",
+    "aria-label": "last page",
+    ...props
+  });
+};
+const buttons = {
+  prev: PrevPageButton,
+  next: NextPageButton,
+  first: FirstPageButton,
+  last: LastPageButton
+};
+const NavigationButton = ({
+  navType,
+  ...restProps
+}) => {
+  const Button = buttons[navType];
+  return jsxRuntime.jsxRuntimeExports.jsx(Button, {
+    ...restProps
+  });
+};
+exports.NavigationButton = NavigationButton;

package/dist/Pagination/components/NavigationButton.d.ts

@@ -0,0 +1,8 @@
+import { IconButtonProps } from '../../Button';
+type ButtonProps = Partial<IconButtonProps>;
+type NavType = 'prev' | 'next' | 'first' | 'last';
+export type PaginationNavigationButtonProps = ButtonProps & {
+    navType: NavType;
+};
+export declare const NavigationButton: ({ navType, ...restProps }: PaginationNavigationButtonProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/Pagination/components/NavigationButton.js

@@ -0,0 +1,78 @@
+import { j as jsxRuntimeExports } from "../../node_modules/react/jsx-runtime.js";
+import { ChevronLeftIcon, ChevronRightIcon, DoubleChevronLeftIcon, DoubleChevronRightIcon } from "@redislabsdev/redis-ui-icons";
+import { usePaginationContext } from "../Pagination.context.js";
+import IconButton from "../../Button/IconButton/IconButton.js";
+const PrevPageButton = (props) => {
+  const {
+    getCanGoPrevPage,
+    onPrevPage
+  } = usePaginationContext();
+  return jsxRuntimeExports.jsx(IconButton, {
+    onClick: onPrevPage,
+    disabled: !getCanGoPrevPage(),
+    icon: ChevronLeftIcon,
+    title: "Previous page",
+    "aria-label": "previous page",
+    ...props
+  });
+};
+const NextPageButton = (props) => {
+  const {
+    getCanGoNextPage,
+    onNextPage
+  } = usePaginationContext();
+  return jsxRuntimeExports.jsx(IconButton, {
+    onClick: onNextPage,
+    disabled: !getCanGoNextPage(),
+    icon: ChevronRightIcon,
+    title: "Next page",
+    "aria-label": "next page",
+    ...props
+  });
+};
+const FirstPageButton = (props) => {
+  const {
+    getCanGoPrevPage,
+    onFirstPage
+  } = usePaginationContext();
+  return jsxRuntimeExports.jsx(IconButton, {
+    onClick: onFirstPage,
+    disabled: !getCanGoPrevPage(),
+    icon: DoubleChevronLeftIcon,
+    title: "First page",
+    "aria-label": "first page",
+    ...props
+  });
+};
+const LastPageButton = (props) => {
+  const {
+    getCanGoNextPage,
+    onLastPage
+  } = usePaginationContext();
+  return jsxRuntimeExports.jsx(IconButton, {
+    onClick: onLastPage,
+    disabled: !getCanGoNextPage(),
+    icon: DoubleChevronRightIcon,
+    title: "Last page",
+    "aria-label": "last page",
+    ...props
+  });
+};
+const buttons = {
+  prev: PrevPageButton,
+  next: NextPageButton,
+  first: FirstPageButton,
+  last: LastPageButton
+};
+const NavigationButton = ({
+  navType,
+  ...restProps
+}) => {
+  const Button = buttons[navType];
+  return jsxRuntimeExports.jsx(Button, {
+    ...restProps
+  });
+};
+export {
+  NavigationButton
+};

package/dist/Pagination/components/PageSelect.cjs

@@ -0,0 +1,51 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("../../node_modules/react/jsx-runtime.cjs");
+const Pagination_context = require("../Pagination.context.cjs");
+const Pagination_style = require("../Pagination.style.cjs");
+const Typography = require("../../Typography/Typography.cjs");
+const toOption = (value) => ({
+  value
+});
+const PageSelect = ({
+  ...restProps
+}) => {
+  const {
+    pageSelectorId,
+    pageIndex,
+    pageCount,
+    onPageChange,
+    getCanSelectPage
+  } = Pagination_context.usePaginationContext();
+  return jsxRuntime.jsxRuntimeExports.jsx(Pagination_style.Select, {
+    id: pageSelectorId,
+    "aria-current": "page",
+    ...restProps,
+    value: (pageIndex + 1).toString(),
+    onChange: (value) => onPageChange(+value - 1),
+    disabled: !getCanSelectPage(),
+    options: Array.from({
+      length: pageCount
+    }, (_, i) => String(i + 1)).map(toOption)
+  });
+};
+const PageSelectLabel = ({
+  children,
+  ...restProps
+}) => {
+  const {
+    pageSelectorId
+  } = Pagination_context.usePaginationContext();
+  return jsxRuntime.jsxRuntimeExports.jsx(Typography.default.Body, {
+    component: "span",
+    size: "auto",
+    ellipsis: true,
+    ...restProps,
+    children: jsxRuntime.jsxRuntimeExports.jsx(Pagination_style.Label, {
+      htmlFor: pageSelectorId,
+      children
+    })
+  });
+};
+PageSelect.Label = PageSelectLabel;
+exports.PageSelect = PageSelect;

package/dist/Pagination/components/PageSelect.d.ts

@@ -0,0 +1,10 @@
+import { ComponentProps } from 'react';
+import { SelectProps } from '../../Select';
+import { Typography } from '../../Typography';
+export type PaginationPageSelectProps = Omit<SelectProps, 'value' | 'onChange' | 'disabled' | 'options'>;
+export declare const PageSelect: {
+    ({ ...restProps }: PaginationPageSelectProps): import("react/jsx-runtime").JSX.Element;
+    Label: ({ children, ...restProps }: PageSelectLabelProps) => import("react/jsx-runtime").JSX.Element;
+};
+type PageSelectLabelProps = ComponentProps<typeof Typography.Body>;
+export {};

package/dist/Pagination/components/PageSelect.js

@@ -0,0 +1,51 @@
+import { j as jsxRuntimeExports } from "../../node_modules/react/jsx-runtime.js";
+import { usePaginationContext } from "../Pagination.context.js";
+import { Select, Label } from "../Pagination.style.js";
+import Typography from "../../Typography/Typography.js";
+const toOption = (value) => ({
+  value
+});
+const PageSelect = ({
+  ...restProps
+}) => {
+  const {
+    pageSelectorId,
+    pageIndex,
+    pageCount,
+    onPageChange,
+    getCanSelectPage
+  } = usePaginationContext();
+  return jsxRuntimeExports.jsx(Select, {
+    id: pageSelectorId,
+    "aria-current": "page",
+    ...restProps,
+    value: (pageIndex + 1).toString(),
+    onChange: (value) => onPageChange(+value - 1),
+    disabled: !getCanSelectPage(),
+    options: Array.from({
+      length: pageCount
+    }, (_, i) => String(i + 1)).map(toOption)
+  });
+};
+const PageSelectLabel = ({
+  children,
+  ...restProps
+}) => {
+  const {
+    pageSelectorId
+  } = usePaginationContext();
+  return jsxRuntimeExports.jsx(Typography.Body, {
+    component: "span",
+    size: "auto",
+    ellipsis: true,
+    ...restProps,
+    children: jsxRuntimeExports.jsx(Label, {
+      htmlFor: pageSelectorId,
+      children
+    })
+  });
+};
+PageSelect.Label = PageSelectLabel;
+export {
+  PageSelect
+};