@veracity/vui 0.5.2 → 0.6.1

package/pagination/index.d.ts

@@ -0,0 +1,13 @@
+export * from './context';
+export * from './helpers';
+export * from './pagination';
+export { default } from './pagination';
+export * from './pagination.types';
+export * from './paginationButton';
+export * from './paginationEllipsis';
+export * from './paginationGoToPage';
+export * from './paginationNavigation';
+export * from './paginationPrevNext';
+export * from './paginationResults';
+export { default as usePagination } from './usePagination';
+export * from './usePagination.types';

package/pagination/index.js

@@ -0,0 +1,31 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePagination = exports.default = void 0;
+__exportStar(require("./context"), exports);
+__exportStar(require("./helpers"), exports);
+__exportStar(require("./pagination"), exports);
+var pagination_1 = require("./pagination");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(pagination_1).default; } });
+__exportStar(require("./pagination.types"), exports);
+__exportStar(require("./paginationButton"), exports);
+__exportStar(require("./paginationEllipsis"), exports);
+__exportStar(require("./paginationGoToPage"), exports);
+__exportStar(require("./paginationNavigation"), exports);
+__exportStar(require("./paginationPrevNext"), exports);
+__exportStar(require("./paginationResults"), exports);
+var usePagination_1 = require("./usePagination");
+Object.defineProperty(exports, "usePagination", { enumerable: true, get: function () { return __importDefault(usePagination_1).default; } });
+__exportStar(require("./usePagination.types"), exports);

package/pagination/pagination.d.ts

@@ -0,0 +1,21 @@
+import { VuiComponent } from '../core';
+import { PaginationProps } from './pagination.types';
+import PaginationButton from './paginationButton';
+import PaginationEllipsis from './paginationEllipsis';
+import PaginationGoToPage from './paginationGoToPage';
+import PaginationNavigation from './paginationNavigation';
+import PaginationPrevNext from './paginationPrevNext';
+import PaginationResults from './paginationResults';
+/**
+ * Displays page navigation buttons together with page and item count.
+ * GoToPage component is shown automatically above 10 pages.
+ */
+export declare const Pagination: VuiComponent<"div", PaginationProps> & {
+    Button: typeof PaginationButton;
+    Ellipsis: typeof PaginationEllipsis;
+    GoToPage: typeof PaginationGoToPage;
+    Navigation: typeof PaginationNavigation;
+    PrevNext: typeof PaginationPrevNext;
+    Results: typeof PaginationResults;
+};
+export default Pagination;

package/pagination/pagination.js

@@ -0,0 +1,70 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Pagination = void 0;
+var react_1 = __importDefault(require("react"));
+var box_1 = __importDefault(require("../box"));
+var core_1 = require("../core");
+var utils_1 = require("../utils");
+var context_1 = require("./context");
+var paginationButton_1 = __importDefault(require("./paginationButton"));
+var paginationEllipsis_1 = __importDefault(require("./paginationEllipsis"));
+var paginationGoToPage_1 = __importDefault(require("./paginationGoToPage"));
+var paginationNavigation_1 = __importDefault(require("./paginationNavigation"));
+var paginationPrevNext_1 = __importDefault(require("./paginationPrevNext"));
+var paginationResults_1 = __importDefault(require("./paginationResults"));
+var usePagination_1 = __importDefault(require("./usePagination"));
+/**
+ * Displays page navigation buttons together with page and item count.
+ * GoToPage component is shown automatically above 10 pages.
+ */
+exports.Pagination = (0, core_1.vui)(function (props, ref) {
+    var _a;
+    var children = props.children, className = props.className, count = props.count, defaultPage = props.defaultPage, goToPage = props.goToPage, _b = props.items, itemsProp = _b === void 0 ? [] : _b, navigation = props.navigation, onPageChange = props.onPageChange, pageProp = props.page, pageSize = props.pageSize, results = props.results, size = props.size, variant = props.variant, rest = __rest(props, ["children", "className", "count", "defaultPage", "goToPage", "items", "navigation", "onPageChange", "page", "pageSize", "results", "size", "variant"]);
+    var styles = (0, core_1.useStyleConfig)('Pagination', props);
+    var _c = (0, usePagination_1.default)({
+        count: count,
+        defaultPage: defaultPage,
+        onPageChange: onPageChange,
+        page: pageProp,
+        pageSize: pageSize
+    }), _d = _c.items, items = _d === void 0 ? itemsProp : _d, paginationProps = __rest(_c, ["items"]);
+    var context = __assign(__assign({}, paginationProps), { items: items, size: size, variant: variant });
+    return (react_1.default.createElement(context_1.PaginationProvider, { value: context },
+        react_1.default.createElement(box_1.default, __assign({ centerV: true, className: (0, utils_1.cs)('vui-pagination', className), gap: 3, ref: ref, w: 1, wrap: true }, styles.container, rest), (_a = (0, utils_1.runIfFn)(children, context)) !== null && _a !== void 0 ? _a : (react_1.default.createElement(react_1.default.Fragment, null,
+            (0, utils_1.isJsx)(results) ? results : react_1.default.createElement(paginationResults_1.default, null),
+            (0, utils_1.isJsx)(navigation) ? navigation : react_1.default.createElement(paginationNavigation_1.default, { ml: "auto" }),
+            (0, utils_1.isJsx)(goToPage) ? goToPage : paginationProps.pageCount > 10 && react_1.default.createElement(paginationGoToPage_1.default, null))))));
+});
+exports.Pagination.displayName = 'Notification';
+exports.Pagination.Button = paginationButton_1.default;
+exports.Pagination.Ellipsis = paginationEllipsis_1.default;
+exports.Pagination.GoToPage = paginationGoToPage_1.default;
+exports.Pagination.Navigation = paginationNavigation_1.default;
+exports.Pagination.PrevNext = paginationPrevNext_1.default;
+exports.Pagination.Results = paginationResults_1.default;
+exports.default = exports.Pagination;

package/pagination/pagination.types.d.ts

@@ -0,0 +1,31 @@
+/// <reference types="react" />
+import { BoxProps } from '../box';
+import { ButtonProps } from '../button';
+import { ThemingProps } from '../theme';
+import { RenderProps } from '../utils';
+import { UsePaginationReturnType } from './usePagination';
+import { UsePaginationProps } from './usePagination.types';
+export declare type PaginationButtonProps = ButtonProps & {
+    /** Applies different styling to a button of the current page. */
+    isActive?: boolean;
+    /** Number of the page, which this button represents. */
+    page: number;
+};
+export declare type PaginationContext = UsePaginationReturnType & ThemingProps<'Pagination'>;
+export declare type PaginationItem = 'ellipsisEnd' | 'ellipsisStart' | 'next' | 'previous' | number;
+export declare type PaginationPrevNextProps = ButtonProps & {
+    /** Defines the logic of previous and next buttons. */
+    direction: 'previous' | 'next';
+};
+export declare type PaginationProps = Omit<BoxProps, 'size' | 'variant'> & ThemingProps<'Pagination'> & UsePaginationProps & {
+    /** Children provide render props using PaginationContext data. */
+    children?: RenderProps<PaginationContext>;
+    /** Socket for page input on the right side. */
+    goToPage?: JSX.Element;
+    /** Array describing pagination items, like page buttons, prev/next arrows or ellipsis. */
+    items?: PaginationItem[];
+    /** Socket for the main navigation elements in the middle. */
+    navigation?: JSX.Element;
+    /** Socket for numbers data on the left side. */
+    results?: JSX.Element;
+};

package/pagination/pagination.types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/pagination/paginationButton.d.ts

@@ -0,0 +1,4 @@
+import { PaginationButtonProps } from './pagination.types';
+/** Displays a page navigation button within the Pagination. */
+export declare const PaginationButton: import("../core").VuiComponent<"button", PaginationButtonProps>;
+export default PaginationButton;

package/pagination/paginationButton.js

@@ -0,0 +1,51 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PaginationButton = void 0;
+var react_1 = __importDefault(require("react"));
+var button_1 = __importDefault(require("../button"));
+var core_1 = require("../core");
+var utils_1 = require("../utils");
+var context_1 = require("./context");
+/** Displays a page navigation button within the Pagination. */
+exports.PaginationButton = (0, core_1.vui)(function (props, ref) {
+    var className = props.className, isActiveProp = props.isActive, pageProp = props.page, rest = __rest(props, ["className", "isActive", "page"]);
+    var _a = (0, context_1.usePaginationContext)(), onPageChange = _a.onPageChange, page = _a.page;
+    var styles = (0, core_1.useStyleConfig)('Pagination', (0, context_1.usePaginationContext)());
+    var isActive = isActiveProp !== null && isActiveProp !== void 0 ? isActiveProp : pageProp === page;
+    var activeProps = isActive
+        ? {
+            bg: 'blue.20',
+            color: 'blue.80',
+            hoverBg: 'blue.30',
+            activeBg: 'blue.40'
+        }
+        : {};
+    return (react_1.default.createElement(button_1.default, __assign({ className: (0, utils_1.cs)('vui-paginationButton', className), minW: 0, onClick: function () { return onPageChange(pageProp); }, ref: ref, size: "sm", text: pageProp, variant: "text" }, styles.button, activeProps, rest)));
+});
+exports.PaginationButton.displayName = 'PaginationButton';
+exports.default = exports.PaginationButton;

package/pagination/paginationEllipsis.d.ts

@@ -0,0 +1,4 @@
+import { BoxProps } from '../box';
+/** Displays '...' ellipsis for hidden pages. */
+export declare const PaginationEllipsis: import("../core").VuiComponent<"span", BoxProps>;
+export default PaginationEllipsis;

package/pagination/paginationEllipsis.js

@@ -0,0 +1,41 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PaginationEllipsis = void 0;
+var react_1 = __importDefault(require("react"));
+var box_1 = __importDefault(require("../box"));
+var core_1 = require("../core");
+var utils_1 = require("../utils");
+var context_1 = require("./context");
+/** Displays '...' ellipsis for hidden pages. */
+exports.PaginationEllipsis = (0, core_1.vui)(function (props, ref) {
+    var children = props.children, className = props.className, rest = __rest(props, ["children", "className"]);
+    var styles = (0, core_1.useStyleConfig)('Pagination', (0, context_1.usePaginationContext)());
+    return (react_1.default.createElement(box_1.default, __assign({ alignItems: "center", className: (0, utils_1.cs)('vui-paginationEllipsis', className), px: "10px", ref: ref }, styles.ellipsis, rest), children !== null && children !== void 0 ? children : '...'));
+});
+exports.PaginationEllipsis.displayName = 'PaginationEllipsis';
+exports.default = exports.PaginationEllipsis;

package/pagination/paginationGoToPage.d.ts

@@ -0,0 +1,4 @@
+import { BoxProps } from '../box';
+/** Displays a number input, which allows quickly jumping between pages. */
+export declare const PaginationGoToPage: import("../core").VuiComponent<"div", BoxProps>;
+export default PaginationGoToPage;

package/pagination/paginationGoToPage.js

@@ -0,0 +1,53 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PaginationGoToPage = void 0;
+var react_1 = __importDefault(require("react"));
+var box_1 = __importDefault(require("../box"));
+var core_1 = require("../core");
+var input_1 = __importDefault(require("../input"));
+var t_1 = __importDefault(require("../t"));
+var utils_1 = require("../utils");
+var context_1 = require("./context");
+/** Displays a number input, which allows quickly jumping between pages. */
+exports.PaginationGoToPage = (0, core_1.vui)(function (props, ref) {
+    var className = props.className, rest = __rest(props, ["className"]);
+    var _a = (0, context_1.usePaginationContext)(), onPageChange = _a.onPageChange, pageCount = _a.pageCount;
+    var styles = (0, core_1.useStyleConfig)('Pagination', (0, context_1.usePaginationContext)());
+    var onChange = function (e) {
+        var value = +e.target.value;
+        if (value >= 1 && value <= pageCount) {
+            onPageChange(Math.floor(value));
+        }
+    };
+    return (react_1.default.createElement(box_1.default, __assign({ centerV: true, className: (0, utils_1.cs)('vui-paginationGoToPage', className), lineHeight: "normal", ref: ref }, styles.goToPage, rest),
+        react_1.default.createElement(t_1.default, { size: "sm", weight: "medium" }, "Go to"),
+        react_1.default.createElement(input_1.default, { max: pageCount, min: 1, mx: 1, onChange: onChange, size: "sm", type: "number", w: 56 }),
+        react_1.default.createElement(t_1.default, { size: "sm", weight: "medium" }, "Page")));
+});
+exports.PaginationGoToPage.displayName = 'PaginationGoToPage';
+exports.default = exports.PaginationGoToPage;

package/pagination/paginationNavigation.d.ts

@@ -0,0 +1,4 @@
+import { BoxProps } from '../box';
+/** Displays a set of page navigation buttons. */
+export declare const PaginationNavigation: import("../core").VuiComponent<"div", BoxProps>;
+export default PaginationNavigation;

package/pagination/paginationNavigation.js

@@ -0,0 +1,68 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PaginationNavigation = void 0;
+var react_1 = __importStar(require("react"));
+var box_1 = __importDefault(require("../box"));
+var core_1 = require("../core");
+var utils_1 = require("../utils");
+var context_1 = require("./context");
+var paginationButton_1 = __importDefault(require("./paginationButton"));
+var paginationEllipsis_1 = __importDefault(require("./paginationEllipsis"));
+var paginationPrevNext_1 = __importDefault(require("./paginationPrevNext"));
+/** Displays a set of page navigation buttons. */
+exports.PaginationNavigation = (0, core_1.vui)(function (props, ref) {
+    var children = props.children, className = props.className, rest = __rest(props, ["children", "className"]);
+    var items = (0, context_1.usePaginationContext)().items;
+    var styles = (0, core_1.useStyleConfig)('Pagination', (0, context_1.usePaginationContext)());
+    return (react_1.default.createElement(box_1.default, __assign({ className: (0, utils_1.cs)('vui-paginationNavigation', className), gap: 1, ref: ref, wrap: true }, styles.navigation, rest), children !== null && children !== void 0 ? children : items.map(function (item) { return (react_1.default.createElement(react_1.Fragment, { key: item },
+        item === 'previous' && react_1.default.createElement(paginationPrevNext_1.default, { direction: "previous" }),
+        (0, utils_1.isNumber)(item) && react_1.default.createElement(paginationButton_1.default, { page: item }),
+        (0, utils_1.isString)(item) && item.includes('ellipsis') && react_1.default.createElement(paginationEllipsis_1.default, null),
+        item === 'next' && react_1.default.createElement(paginationPrevNext_1.default, { direction: "next" }))); })));
+});
+exports.PaginationNavigation.displayName = 'PaginationNavigation';
+exports.default = exports.PaginationNavigation;

package/pagination/paginationPrevNext.d.ts

@@ -0,0 +1,4 @@
+import { PaginationPrevNextProps } from './pagination.types';
+/** Displays a page navigation button, which navigates forward or backward. */
+export declare const PaginationPrevNext: import("../core").VuiComponent<"button", PaginationPrevNextProps>;
+export default PaginationPrevNext;

package/pagination/paginationPrevNext.js

@@ -0,0 +1,49 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PaginationPrevNext = void 0;
+var react_1 = __importDefault(require("react"));
+var button_1 = __importDefault(require("../button"));
+var core_1 = require("../core");
+var utils_1 = require("../utils");
+var context_1 = require("./context");
+/** Displays a page navigation button, which navigates forward or backward. */
+exports.PaginationPrevNext = (0, core_1.vui)(function (props, ref) {
+    var className = props.className, direction = props.direction, rest = __rest(props, ["className", "direction"]);
+    var _a = (0, context_1.usePaginationContext)(), onPageChange = _a.onPageChange, page = _a.page, pageCount = _a.pageCount;
+    var styles = (0, core_1.useStyleConfig)('Pagination', (0, context_1.usePaginationContext)());
+    var isPrev = direction === 'previous';
+    var pageChange = isPrev ? -1 : 1;
+    var directionProps = {
+        disabled: isPrev ? page === 1 : page === pageCount,
+        icon: isPrev ? 'falAngleLeft' : 'falAngleRight',
+        onClick: function () { return onPageChange(page + pageChange); }
+    };
+    return (react_1.default.createElement(button_1.default, __assign({ className: (0, utils_1.cs)('vui-paginationPrevNext', className), minW: 0, ref: ref, size: "sm", variant: "text" }, styles.prevNext, directionProps, rest)));
+});
+exports.PaginationPrevNext.displayName = 'PaginationPrevNext';
+exports.default = exports.PaginationPrevNext;

package/pagination/paginationResults.d.ts

@@ -0,0 +1,4 @@
+import { TProps } from '../t';
+/** Displays an action button within the Pagination. */
+export declare const PaginationResults: import("../core").VuiComponent<"span", TProps>;
+export default PaginationResults;

package/pagination/paginationResults.js

@@ -0,0 +1,42 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PaginationResults = void 0;
+var react_1 = __importDefault(require("react"));
+var core_1 = require("../core");
+var t_1 = __importDefault(require("../t"));
+var utils_1 = require("../utils");
+var context_1 = require("./context");
+/** Displays an action button within the Pagination. */
+exports.PaginationResults = (0, core_1.vui)(function (props, ref) {
+    var children = props.children, className = props.className, rest = __rest(props, ["children", "className"]);
+    var _a = (0, context_1.usePaginationContext)(), count = _a.count, rangeEnd = _a.rangeEnd, rangeStart = _a.rangeStart;
+    var styles = (0, core_1.useStyleConfig)('Pagination', (0, context_1.usePaginationContext)());
+    return (react_1.default.createElement(t_1.default, __assign({ className: (0, utils_1.cs)('vui-paginationResults', className), color: "grey.80", ref: ref, size: "sm", weight: "medium" }, styles.results, rest), children !== null && children !== void 0 ? children : "Showing " + rangeStart + " to " + rangeEnd + " of " + count + " results."));
+});
+exports.PaginationResults.displayName = 'PaginationResults';
+exports.default = exports.PaginationResults;

package/pagination/theme.d.ts

@@ -0,0 +1,8 @@
+declare const _default: {
+    baseStyle: {};
+    defaultProps: {};
+    parts: string[];
+    sizes: {};
+    variants: {};
+};
+export default _default;

package/pagination/theme.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var baseStyle = {};
+var defaultProps = {};
+var parts = ['container', 'button', 'ellipsis', 'goToPage', 'navigation', 'prevNext', 'results'];
+var sizes = {};
+var variants = {};
+exports.default = {
+    baseStyle: baseStyle,
+    defaultProps: defaultProps,
+    parts: parts,
+    sizes: sizes,
+    variants: variants
+};

package/pagination/usePagination.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import { UsePaginationProps } from './usePagination.types';
+/** Hook to manage pagination data and state in controlled or uncontrolled way. */
+export default function usePagination(props: UsePaginationProps): {
+    count: number;
+    items: import("./pagination.types").PaginationItem[];
+    onPageChange: import("react").Dispatch<import("react").SetStateAction<number>>;
+    page: number;
+    pageCount: number;
+    pageSize: number;
+    rangeEnd: number;
+    rangeStart: number;
+};
+export declare type UsePaginationReturnType = ReturnType<typeof usePagination>;

package/pagination/usePagination.js

@@ -0,0 +1,58 @@
+"use strict";
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = require("react");
+var utils_1 = require("../utils");
+var helpers_1 = require("./helpers");
+/** Hook to manage pagination data and state in controlled or uncontrolled way. */
+function usePagination(props) {
+    var count = props.count, _a = props.defaultPage, defaultPage = _a === void 0 ? 1 : _a, onPageChangeProp = props.onPageChange, pageProp = props.page, pageSize = props.pageSize;
+    var _b = __read((0, utils_1.useControlled)({
+        defaultValue: defaultPage,
+        onChange: onPageChangeProp,
+        value: pageProp
+    }), 3), page = _b[0], onPageChange = _b[1], _c = _b[2], isControlled = _c.isControlled, reset = _c.reset;
+    // In uncontrolled mode, trigger external callback on the first render for consumer to initialize data.
+    (0, react_1.useEffect)(function () {
+        !isControlled && (onPageChangeProp === null || onPageChangeProp === void 0 ? void 0 : onPageChangeProp(defaultPage));
+    }, []);
+    /** In uncontrolled mode, reset pagination whenever pageSize changes (apart from initialization). */
+    (0, react_1.useEffect)(function () {
+        isMounted() && reset();
+    }, [pageSize]);
+    var isMounted = (0, utils_1.useIsMounted)();
+    /** How many pages are there in total. */
+    var pageCount = count > 0 && pageSize > 0 ? Math.ceil(count / pageSize) : 0;
+    /** Array of navigation items, like buttons or arrows. */
+    var items = (0, helpers_1.getPaginationItems)(page, pageCount);
+    /** First item displayed on the current page. */
+    var rangeStart = (page - 1) * pageSize + 1;
+    /** Last item displayed on the current page. */
+    var rangeEnd = page === pageCount ? count : page * pageSize;
+    return {
+        count: count,
+        items: items,
+        onPageChange: onPageChange,
+        page: page,
+        pageCount: pageCount,
+        pageSize: pageSize,
+        rangeEnd: rangeEnd,
+        rangeStart: rangeStart
+    };
+}
+exports.default = usePagination;

package/pagination/usePagination.types.d.ts

@@ -0,0 +1,12 @@
+export declare type UsePaginationProps = {
+    /** Total amount of items being paginated. */
+    count: number;
+    /** Starting page in uncontrolled mode. */
+    defaultPage?: number;
+    /** Callback triggered by Pagination elements. */
+    onPageChange?: (page: number) => void;
+    /** Currently displayed page. */
+    page?: number;
+    /** Amount of items per page. */
+    pageSize: number;
+};

package/pagination/usePagination.types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });