@bolio-ui/core 1.0.4 → 1.0.6

package/esm/Page/Page.d.ts

@@ -0,0 +1,17 @@
+import React, { CSSProperties } from 'react';
+declare const renderMode: ["default", "effect", "effect-seo"];
+export declare type PageRenderMode = typeof renderMode[number];
+interface Props {
+    render?: PageRenderMode;
+    dotBackdrop?: boolean;
+    dotSize?: CSSProperties['fontSize'];
+    dotSpace?: number;
+}
+export declare type DotStylesProps = {
+    dotSize: CSSProperties['fontSize'];
+    dotSpace: number;
+};
+declare type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>;
+export declare type PageProps = Props & NativeAttrs;
+declare const Page: React.ForwardRefExoticComponent<Props & NativeAttrs & import("../use-scale").ScaleProps & React.RefAttributes<unknown>>;
+export default Page;

package/esm/Page/Page.js

@@ -0,0 +1,88 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["children", "render", "dotBackdrop", "className", "dotSize", "dotSpace"];
+import _JSXStyle from "../styled-jsx.es.js";
+import React, { useEffect, useMemo, useState } from 'react';
+import { tuple } from '../utils/prop-types';
+import useTheme from '../use-theme';
+import PageContent from './PageContent';
+import { hasChild } from '../utils/collections';
+import useScale, { withScale } from '../use-scale';
+var renderMode = tuple('default', 'effect', 'effect-seo');
+
+var DotStyles = function DotStyles(_ref) {
+  var dotSpace = _ref.dotSpace,
+      dotSize = _ref.dotSize;
+  var background = useMemo(function () {
+    return {
+      position: "calc(".concat(dotSpace, " * 25px)"),
+      size: "calc(".concat(dotSpace, " * 50px)")
+    };
+  }, [dotSpace]);
+  return /*#__PURE__*/React.createElement("span", {
+    className: _JSXStyle.dynamic([["2593286177", [dotSize, dotSize, background.position, background.position, background.size, background.size]]])
+  }, /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "2593286177",
+    dynamic: [dotSize, dotSize, background.position, background.position, background.size, background.size]
+  }, "body{background-image:radial-gradient(#e3e3e3 ".concat(dotSize, ",transparent 0), radial-gradient(#e3e3e3 ").concat(dotSize, ",transparent 0);background-position:0 0, ").concat(background.position, " ").concat(background.position, ";background-attachment:fixed;background-size:").concat(background.size, " ").concat(background.size, ";}")));
+};
+
+function PageComponent(_ref2) {
+  var children = _ref2.children,
+      _ref2$render = _ref2.render,
+      render = _ref2$render === void 0 ? 'default' : _ref2$render,
+      _ref2$dotBackdrop = _ref2.dotBackdrop,
+      dotBackdrop = _ref2$dotBackdrop === void 0 ? false : _ref2$dotBackdrop,
+      className = _ref2.className,
+      _ref2$dotSize = _ref2.dotSize,
+      dotSize = _ref2$dotSize === void 0 ? '1px' : _ref2$dotSize,
+      _ref2$dotSpace = _ref2.dotSpace,
+      dotSpace = _ref2$dotSpace === void 0 ? 1 : _ref2$dotSpace,
+      props = _objectWithoutProperties(_ref2, _excluded);
+
+  var theme = useTheme();
+
+  var _useScale = useScale(),
+      SCALES = _useScale.SCALES;
+
+  var showDot = useMemo(function () {
+    if (theme.type === 'dark') return false;
+    return dotBackdrop;
+  }, [dotBackdrop, theme.type]);
+
+  var _useState = useState(render !== 'default'),
+      _useState2 = _slicedToArray(_useState, 2),
+      preventRender = _useState2[0],
+      setPreventRender = _useState2[1];
+
+  useEffect(function () {
+    setPreventRender(false);
+  }, []);
+
+  if (preventRender) {
+    var renderSEO = render === 'effect-seo';
+    if (!renderSEO) return null;
+    return /*#__PURE__*/React.createElement("div", {
+      "aria-hidden": "true",
+      className: "jsx-3942095687" + " " + "hidden"
+    }, children, /*#__PURE__*/React.createElement(_JSXStyle, {
+      id: "3942095687"
+    }, ".hidden.jsx-3942095687{opacity:0;display:none;}"));
+  }
+
+  var hasContent = hasChild(children, PageContent);
+  return /*#__PURE__*/React.createElement("section", _extends({}, props, {
+    className: _JSXStyle.dynamic([["2892125839", [SCALES.font(1), SCALES.width(1, 'calc(100% - 100pt)'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(1.34), SCALES.pb(0), SCALES.pl(1.34), SCALES.mt(0), SCALES.mr(0, 'auto'), SCALES.mb(0), SCALES.ml(0, 'auto')]]]) + " " + (props && props.className != null && props.className || className || "")
+  }), hasContent ? children : /*#__PURE__*/React.createElement(PageContent, null, children), showDot && /*#__PURE__*/React.createElement(DotStyles, {
+    dotSize: dotSize,
+    dotSpace: dotSpace
+  }), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "2892125839",
+    dynamic: [SCALES.font(1), SCALES.width(1, 'calc(100% - 100pt)'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(1.34), SCALES.pb(0), SCALES.pl(1.34), SCALES.mt(0), SCALES.mr(0, 'auto'), SCALES.mb(0), SCALES.ml(0, 'auto')]
+  }, "section.__jsx-style-dynamic-selector{max-width:100vw;min-height:100vh;box-sizing:border-box;position:relative;font-size:".concat(SCALES.font(1), ";height:").concat(SCALES.height(1, 'auto'), ";-webkit-align-content:space-between;-ms-flex-line-pack:space-between;align-content:space-between;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;position:relative;min-height:100vh;}")));
+}
+
+PageComponent.displayName = 'BolioUIPage';
+var Page = withScale(PageComponent);
+export default Page;

package/esm/Page/PageContent.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface Props {
+    className?: string;
+}
+declare type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>;
+export declare type PageContentProps = Props & NativeAttrs;
+declare const PageContent: React.ForwardRefExoticComponent<Props & NativeAttrs & import("../use-scale").ScaleProps & React.RefAttributes<unknown>>;
+export default PageContent;

package/esm/Page/PageFooter.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface Props {
+    className?: string;
+}
+declare type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>;
+export declare type PageFooterProps = Props & NativeAttrs;
+declare const PageFooter: React.ForwardRefExoticComponent<Props & NativeAttrs & import("../use-scale").ScaleProps & React.RefAttributes<unknown>>;
+export default PageFooter;

package/esm/Page/PageHeader.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+interface Props {
+    center?: boolean;
+    className?: string;
+}
+declare type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>;
+export declare type PageHeaderProps = Props & NativeAttrs;
+declare const PageHeader: React.ForwardRefExoticComponent<Props & NativeAttrs & import("../use-scale").ScaleProps & React.RefAttributes<unknown>>;
+export default PageHeader;

package/esm/Page/index.d.ts

@@ -0,0 +1,16 @@
+import Page from "./Page";
+import PageHeader from "./PageHeader";
+import PageContent from "./PageContent";
+import PageFooter from "./PageFooter";
+export declare type PageComponentType = typeof Page & {
+    Header: typeof PageHeader;
+    Content: typeof PageContent;
+    Body: typeof PageContent;
+    Footer: typeof PageFooter;
+};
+export type { PageProps, PageRenderMode } from "./Page";
+export type { PageHeaderProps } from "./PageHeader";
+export type { PageContentProps } from "./PageContent";
+export type { PageFooterProps } from "./PageFooter";
+declare const _default: PageComponentType;
+export default _default;

package/esm/Page/index.js

@@ -0,0 +1,9 @@
+import Page from './Page';
+import PageHeader from './PageHeader';
+import PageContent from './PageContent';
+import PageFooter from './PageFooter';
+Page.Header = PageHeader;
+Page.Content = PageContent;
+Page.Body = PageContent;
+Page.Footer = PageFooter;
+export default Page;

package/esm/Page/stories.js

@@ -0,0 +1,54 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useState } from 'react';
+import Page from '.';
+import Button from '../Button';
+import Grid from '../Grid';
+import MockPage from '../MdxWidgets/MockPage';
+export default {
+  title: 'Layout/Page',
+  component: Page
+};
+export var Default = function Default() {
+  var Child = function Child() {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h2", null, "Hi my dear!"), /*#__PURE__*/React.createElement("p", null, "This is an example to show the body of a page."));
+  };
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      visible = _useState2[0],
+      setVisible = _useState2[1];
+
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Button, {
+    onClick: function onClick() {
+      return setVisible(true);
+    },
+    auto: true
+  }, "View Page"), /*#__PURE__*/React.createElement(MockPage, {
+    visible: visible,
+    onClose: function onClose() {
+      return setVisible(false);
+    }
+  }, /*#__PURE__*/React.createElement(Page, null, /*#__PURE__*/React.createElement(Child, null)))));
+};
+export var Content = function Content() {
+  var _React$useState = React.useState(false),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      visible = _React$useState2[0],
+      setVisible = _React$useState2[1];
+
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Button, {
+    onClick: function onClick() {
+      return setVisible(true);
+    },
+    auto: true
+  }, "Header, Body and Footer"), /*#__PURE__*/React.createElement(MockPage, {
+    visible: visible,
+    onClose: function onClose() {
+      return setVisible(false);
+    }
+  }, /*#__PURE__*/React.createElement(Page, null, /*#__PURE__*/React.createElement(Page.Header, null, /*#__PURE__*/React.createElement("h2", null, "Header")), /*#__PURE__*/React.createElement(Page.Content, null, /*#__PURE__*/React.createElement("h2", null, "Hi my dear!"), /*#__PURE__*/React.createElement("p", null, "This is an example to show the body of a page.")), /*#__PURE__*/React.createElement(Page.Footer, null, /*#__PURE__*/React.createElement("h2", null, "Footer"))))));
+};

package/esm/Pagination/Pagination.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+interface Props {
+    page?: number;
+    initialPage?: number;
+    count?: number;
+    limit?: number;
+    onChange?: (val: number) => void;
+    className?: string;
+}
+declare type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>;
+export declare type PaginationProps = Props & NativeAttrs;
+declare const Pagination: React.ForwardRefExoticComponent<Props & NativeAttrs & import("../use-scale").ScaleProps & React.RefAttributes<unknown>>;
+export default Pagination;

package/esm/Pagination/Pagination.js

@@ -0,0 +1,105 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["page", "initialPage", "count", "limit", "children", "onChange", "className"];
+import _JSXStyle from "../styled-jsx.es.js";
+import React, { useEffect, useMemo } from 'react';
+import PaginationPrevious from './PaginationPrevious';
+import PaginationNext from './PaginationNext';
+import PaginationPages from './PaginationPages';
+import { PaginationContext } from './PaginationContext';
+import useCurrentState from '../utils/use-current-state';
+import { pickChild } from '../utils/collections';
+import useScale, { withScale } from '../use-scale';
+
+function PaginationComponent(_ref) {
+  var customPage = _ref.page,
+      _ref$initialPage = _ref.initialPage,
+      initialPage = _ref$initialPage === void 0 ? 1 : _ref$initialPage,
+      _ref$count = _ref.count,
+      count = _ref$count === void 0 ? 1 : _ref$count,
+      _ref$limit = _ref.limit,
+      limit = _ref$limit === void 0 ? 7 : _ref$limit,
+      children = _ref.children,
+      onChange = _ref.onChange,
+      _ref$className = _ref.className,
+      className = _ref$className === void 0 ? '' : _ref$className,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var _useScale = useScale(),
+      SCALES = _useScale.SCALES;
+
+  var _useCurrentState = useCurrentState(initialPage),
+      _useCurrentState2 = _slicedToArray(_useCurrentState, 3),
+      page = _useCurrentState2[0],
+      setPage = _useCurrentState2[1],
+      pageRef = _useCurrentState2[2];
+
+  var _pickChild = pickChild(children, PaginationPrevious),
+      _pickChild2 = _slicedToArray(_pickChild, 2),
+      prevChildren = _pickChild2[1];
+
+  var _pickChild3 = pickChild(children, PaginationNext),
+      _pickChild4 = _slicedToArray(_pickChild3, 2),
+      nextChildren = _pickChild4[1];
+
+  var _useMemo = useMemo(function () {
+    var hasChildren = function hasChildren(c) {
+      return React.Children.count(c) > 0;
+    };
+
+    var prevDefault = /*#__PURE__*/React.createElement(PaginationPrevious, null, "prev");
+    var nextDefault = /*#__PURE__*/React.createElement(PaginationNext, null, "next");
+    return [hasChildren(prevChildren) ? prevChildren : prevDefault, hasChildren(nextChildren) ? nextChildren : nextDefault];
+  }, [prevChildren, nextChildren]),
+      _useMemo2 = _slicedToArray(_useMemo, 2),
+      prevItem = _useMemo2[0],
+      nextItem = _useMemo2[1];
+
+  var update = function update(type) {
+    if (type === 'prev' && pageRef.current > 1) {
+      setPage(function (last) {
+        return last - 1;
+      });
+    }
+
+    if (type === 'next' && pageRef.current < count) {
+      setPage(function (last) {
+        return last + 1;
+      });
+    }
+  };
+
+  var values = useMemo(function () {
+    return {
+      isFirst: page <= 1,
+      isLast: page >= count,
+      update: update
+    };
+  }, [page, count]);
+  useEffect(function () {
+    onChange && onChange(page);
+  }, [onChange, page]);
+  useEffect(function () {
+    if (customPage !== undefined) {
+      setPage(customPage);
+    }
+  }, [customPage, setPage]);
+  return /*#__PURE__*/React.createElement(PaginationContext.Provider, {
+    value: values
+  }, /*#__PURE__*/React.createElement("nav", _extends({}, props, {
+    className: _JSXStyle.dynamic([["77524905", [SCALES.font(2), SCALES.font(0.875), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]]]) + " " + (props && props.className != null && props.className || className || "")
+  }), prevItem, /*#__PURE__*/React.createElement(PaginationPages, {
+    count: count,
+    current: page,
+    limit: limit,
+    setPage: setPage
+  }), nextItem), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "77524905",
+    dynamic: [SCALES.font(2), SCALES.font(0.875), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]
+  }, "nav.__jsx-style-dynamic-selector{font-variant:tabular-nums;font-feature-settings:'tnum';--pagination-size:".concat(SCALES.font(2), ";font-size:").concat(SCALES.font(0.875), ";width:").concat(SCALES.width(1, 'auto'), ";height:").concat(SCALES.height(1, 'auto'), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}nav.__jsx-style-dynamic-selector button:last-of-type{margin-right:0;}")));
+}
+
+PaginationComponent.displayName = 'BolioUIPagination';
+var Pagination = withScale(PaginationComponent);
+export default Pagination;

package/esm/Pagination/PaginationContext.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+declare const paginationUpdateTypes: ["prev", "next", "click"];
+export declare type PaginationUpdateType = typeof paginationUpdateTypes[number];
+export interface PaginationConfig {
+    isFirst?: boolean;
+    isLast?: boolean;
+    update?: (type: PaginationUpdateType) => void;
+}
+export declare const PaginationContext: React.Context<PaginationConfig>;
+export declare const usePaginationContext: () => PaginationConfig;
+export {};

package/esm/Pagination/PaginationEllipsis.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+interface Props {
+    isBefore?: boolean;
+    onClick?: (e: React.MouseEvent) => void;
+}
+declare function PaginationEllipsis({ isBefore, onClick }: Props): JSX.Element;
+declare namespace PaginationEllipsis {
+    var displayName: string;
+}
+export default PaginationEllipsis;

package/esm/Pagination/PaginationEllipsis.js

@@ -0,0 +1,73 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _JSXStyle from "../styled-jsx.es.js";
+import React, { useState } from 'react';
+import PaginationItem from './PaginationItem';
+
+function PaginationEllipsis(_ref) {
+  var isBefore = _ref.isBefore,
+      _onClick = _ref.onClick;
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      showMore = _useState2[0],
+      setShowMore = _useState2[1];
+
+  return /*#__PURE__*/React.createElement(PaginationItem, {
+    onClick: function onClick(e) {
+      return _onClick && _onClick(e);
+    },
+    onMouseEnter: function onMouseEnter() {
+      return setShowMore(true);
+    },
+    onMouseLeave: function onMouseLeave() {
+      return setShowMore(false);
+    }
+  }, showMore ? /*#__PURE__*/React.createElement("svg", {
+    viewBox: "0 0 24 24",
+    stroke: "currentColor",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    fill: "none",
+    shapeRendering: "geometricPrecision",
+    className: _JSXStyle.dynamic([["2928474255", [isBefore ? '180deg' : '0deg']]]) + " " + "more"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M13 17l5-5-5-5",
+    className: _JSXStyle.dynamic([["2928474255", [isBefore ? '180deg' : '0deg']]])
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M6 17l5-5-5-5",
+    className: _JSXStyle.dynamic([["2928474255", [isBefore ? '180deg' : '0deg']]])
+  })) : /*#__PURE__*/React.createElement("svg", {
+    viewBox: "0 0 24 24",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    fill: "none",
+    shapeRendering: "geometricPrecision",
+    className: _JSXStyle.dynamic([["2928474255", [isBefore ? '180deg' : '0deg']]])
+  }, /*#__PURE__*/React.createElement("circle", {
+    cx: "12",
+    cy: "12",
+    r: "1",
+    fill: "currentColor",
+    className: _JSXStyle.dynamic([["2928474255", [isBefore ? '180deg' : '0deg']]])
+  }), /*#__PURE__*/React.createElement("circle", {
+    cx: "19",
+    cy: "12",
+    r: "1",
+    fill: "currentColor",
+    className: _JSXStyle.dynamic([["2928474255", [isBefore ? '180deg' : '0deg']]])
+  }), /*#__PURE__*/React.createElement("circle", {
+    cx: "5",
+    cy: "12",
+    r: "1",
+    fill: "currentColor",
+    className: _JSXStyle.dynamic([["2928474255", [isBefore ? '180deg' : '0deg']]])
+  })), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "2928474255",
+    dynamic: [isBefore ? '180deg' : '0deg']
+  }, "svg.__jsx-style-dynamic-selector{color:currentColor;stroke:currentColor;width:1em;height:1em;}.more.__jsx-style-dynamic-selector{-webkit-transform:rotate(".concat(isBefore ? '180deg' : '0deg', ");-ms-transform:rotate(").concat(isBefore ? '180deg' : '0deg', ");transform:rotate(").concat(isBefore ? '180deg' : '0deg', ");}")));
+}
+
+PaginationEllipsis.displayName = 'BolioUIPaginationEllipsis';
+export default PaginationEllipsis;

package/esm/Pagination/PaginationItem.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+interface Props {
+    active?: boolean;
+    disabled?: boolean;
+    onClick?: (e: React.MouseEvent) => void;
+}
+declare type NativeAttrs = Omit<React.ButtonHTMLAttributes<any>, keyof Props>;
+export declare type PaginationItemProps = Props & NativeAttrs;
+declare function PaginationItem({ active, children, disabled, onClick, ...props }: PaginationItemProps): JSX.Element;
+declare namespace PaginationItem {
+    var displayName: string;
+}
+export default PaginationItem;

package/esm/Pagination/PaginationNext.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export declare type PaginationNextProps = React.ButtonHTMLAttributes<any>;
+declare function PaginationNext({ children, ...props }: PaginationNextProps): JSX.Element;
+declare namespace PaginationNext {
+    var displayName: string;
+}
+export default PaginationNext;

package/esm/Pagination/PaginationNext.js

@@ -0,0 +1,25 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["children"];
+import React from 'react';
+import PaginationItem from './PaginationItem';
+import { usePaginationContext } from './PaginationContext';
+
+function PaginationNext(_ref) {
+  var children = _ref.children,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var _usePaginationContext = usePaginationContext(),
+      update = _usePaginationContext.update,
+      isLast = _usePaginationContext.isLast;
+
+  return /*#__PURE__*/React.createElement(PaginationItem, _extends({
+    onClick: function onClick() {
+      return update && update('next');
+    },
+    disabled: isLast
+  }, props), children);
+}
+
+PaginationNext.displayName = 'BolioUIPaginationNext';
+export default PaginationNext;

package/esm/Pagination/PaginationPages.d.ts

@@ -0,0 +1,12 @@
+import { Dispatch, SetStateAction } from 'react';
+interface Props {
+    limit: number;
+    count: number;
+    current: number;
+    setPage: Dispatch<SetStateAction<number>>;
+}
+declare function PaginationPages({ limit, count, current, setPage }: Props): JSX.Element;
+declare namespace PaginationPages {
+    var displayName: string;
+}
+export default PaginationPages;

package/esm/Pagination/PaginationPages.js

@@ -0,0 +1,90 @@
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useCallback, useMemo } from 'react';
+import PaginationItem from './PaginationItem';
+import PaginationEllipsis from './PaginationEllipsis';
+
+function PaginationPages(_ref) {
+  var limit = _ref.limit,
+      count = _ref.count,
+      current = _ref.current,
+      setPage = _ref.setPage;
+  var showPages = useMemo(function () {
+    var oddLimit = limit % 2 === 0 ? limit - 1 : limit;
+    return oddLimit - 2;
+  }, [limit]);
+  var middleNumber = (showPages + 1) / 2;
+
+  var _useMemo = useMemo(function () {
+    var showEllipsis = count > limit;
+    return [showEllipsis && current > middleNumber + 1, showEllipsis && current < count - middleNumber];
+  }, [current, middleNumber, count, limit]),
+      _useMemo2 = _slicedToArray(_useMemo, 2),
+      showBeforeEllipsis = _useMemo2[0],
+      showAfterEllipsis = _useMemo2[1];
+
+  var pagesArray = useMemo(function () {
+    return _toConsumableArray(new Array(showPages));
+  }, [showPages]);
+  var renderItem = useCallback(function (value, active) {
+    return /*#__PURE__*/React.createElement(PaginationItem, {
+      key: "pagination-item-".concat(value),
+      active: value === active,
+      onClick: function onClick() {
+        return setPage(value);
+      }
+    }, value);
+  }, [setPage]);
+  var startPages = pagesArray.map(function (_, index) {
+    var value = index + 2;
+    return renderItem(value, current);
+  });
+  var middlePages = pagesArray.map(function (_, index) {
+    var middleIndexNumber = middleNumber - (index + 1);
+    var value = current - middleIndexNumber;
+    return /*#__PURE__*/React.createElement(PaginationItem, {
+      key: "pagination-middle-".concat(index),
+      active: index + 1 === middleNumber,
+      onClick: function onClick() {
+        return setPage(value);
+      }
+    }, value);
+  });
+  var endPages = pagesArray.map(function (_, index) {
+    var value = count - (showPages - index);
+    return renderItem(value, current);
+  });
+
+  if (count <= limit) {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, _toConsumableArray(new Array(count)).map(function (_, index) {
+      var value = index + 1;
+      return /*#__PURE__*/React.createElement(PaginationItem, {
+        key: "pagination-item-".concat(value),
+        active: value === current,
+        onClick: function onClick() {
+          return setPage(value);
+        }
+      }, value);
+    }));
+  }
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, renderItem(1, current), showBeforeEllipsis && /*#__PURE__*/React.createElement(PaginationEllipsis, {
+    key: "pagination-ellipsis-before",
+    isBefore: true,
+    onClick: function onClick() {
+      return setPage(function (last) {
+        return last - 5 >= 1 ? last - 5 : 1;
+      });
+    }
+  }), showBeforeEllipsis && showAfterEllipsis ? middlePages : showBeforeEllipsis ? endPages : startPages, showAfterEllipsis && /*#__PURE__*/React.createElement(PaginationEllipsis, {
+    key: "pagination-ellipsis-after",
+    onClick: function onClick() {
+      return setPage(function (last) {
+        return last + 5 <= count ? last + 5 : count;
+      });
+    }
+  }), renderItem(count, current));
+}
+
+PaginationPages.displayName = 'BolioUIPaginationPages';
+export default PaginationPages;

package/esm/Pagination/PaginationPrevious.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export declare type PaginationPreviousProps = React.ButtonHTMLAttributes<any>;
+declare function PaginationPrevious({ children, ...props }: PaginationPreviousProps): JSX.Element;
+declare namespace PaginationPrevious {
+    var displayName: string;
+}
+export default PaginationPrevious;

package/esm/Pagination/PaginationPrevious.js

@@ -0,0 +1,25 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["children"];
+import React from 'react';
+import PaginationItem from './PaginationItem';
+import { usePaginationContext } from './PaginationContext';
+
+function PaginationPrevious(_ref) {
+  var children = _ref.children,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var _usePaginationContext = usePaginationContext(),
+      update = _usePaginationContext.update,
+      isFirst = _usePaginationContext.isFirst;
+
+  return /*#__PURE__*/React.createElement(PaginationItem, _extends({
+    onClick: function onClick() {
+      return update && update('prev');
+    },
+    disabled: isFirst
+  }, props), children);
+}
+
+PaginationPrevious.displayName = 'BolioUIPaginationPrevious';
+export default PaginationPrevious;

package/esm/Pagination/index.d.ts

@@ -0,0 +1,12 @@
+import Pagination from "./Pagination";
+import PaginationPrevious from "./PaginationPrevious";
+import PaginationNext from "./PaginationNext";
+export declare type PaginationComponentType = typeof Pagination & {
+    Previous: typeof PaginationPrevious;
+    Next: typeof PaginationNext;
+};
+export type { PaginationProps } from "./Pagination";
+export type { PaginationPreviousProps } from "./PaginationPrevious";
+export type { PaginationNextProps } from "./PaginationNext";
+declare const _default: PaginationComponentType;
+export default _default;

package/esm/Pagination/index.js

@@ -0,0 +1,6 @@
+import Pagination from './Pagination';
+import PaginationPrevious from './PaginationPrevious';
+import PaginationNext from './PaginationNext';
+Pagination.Previous = PaginationPrevious;
+Pagination.Next = PaginationNext;
+export default Pagination;