meticulous-ui 1.0.4 → 1.0.6

package/README.md

@@ -19,9 +19,8 @@ yarn add meticulous-ui
 ## 🧩 Usage
 
 ```jsx
-
-import { useState } from "react";
-import Pagination from "meticulous-ui/components/Pagination";
+import { useState } from 'react';
+import Pagination from 'meticulous-ui/components/Pagination';
 
 function App() {
   const [pageNumber, setPageNumber] = useState(1);
@@ -35,7 +34,6 @@ function App() {
 }
 
 export default App;
-
 ```
 
 ## 📦 Components
@@ -46,6 +44,10 @@ export default App;
 | `ChevronLeft`  | Left navigation icon                  |
 | `ChevronRight` | Right navigation icon                 |
 
+## Demo
+
+<a href="https://xe3110.github.io/meticulous-ui/" target="_blank">https://xe3110.github.io/meticulous-ui/</a>
+
 ## 🌱 Features
 
 ⚛️ Built with React + Styled Components

package/dist/components/Pagination/Pagination.js

@@ -1,36 +1,41 @@
 import { j as c } from "../../_virtual/jsx-runtime.js";
-import f from "../../node_modules/lodash-es/range.js";
-import { renderPageNum as o, renderThreeDots as C } from "./helpers.js";
-import { AllPages as s, ClickableChevronLeft as k, ClickableChevronRight as h } from "./styles.js";
-const R = ({ pageNumber: i, setPageNumber: x, totalPages: n }) => {
-  const j = () => {
-    i > 1 && x(i - 1);
-  }, d = () => {
-    i < n && x(i + 1);
-  };
-  return n <= 7 ? /* @__PURE__ */ c.jsxs(s, { children: [
-    /* @__PURE__ */ c.jsx(k, { onClick: j }),
-    f(1, n + 1).map(o(i, x)),
-    /* @__PURE__ */ c.jsx(h, { onClick: j })
-  ] }) : n < 10 || i < 4 || i > n - 3 && i <= n ? /* @__PURE__ */ c.jsxs(s, { children: [
-    /* @__PURE__ */ c.jsx(k, { size: 20, onClick: j }),
-    f(1, 5).map(o(i, x)),
-    C(),
-    [n - 3, n - 2, n - 1, n].map(
-      o(i, x)
-    ),
-    /* @__PURE__ */ c.jsx(h, { size: 20, onClick: d })
-  ] }) : /* @__PURE__ */ c.jsxs(s, { children: [
-    /* @__PURE__ */ c.jsx(k, { size: 20, onClick: j }),
-    f(1, 3).map(o(i, x)),
-    C(),
-    [i - 1, i, i + 1].map(o(i, x)),
-    C(),
-    [n - 1, n].map(o(i, x)),
-    /* @__PURE__ */ c.jsx(h, { size: 20, onClick: d })
+import C from "../../node_modules/lodash-es/range.js";
+import { renderPageNum as j, renderThreeDots as h } from "./helpers.js";
+import { ICON_SIZE_MAPPING as R, LARGE as v, SIZE_REM_MAPPING as z } from "./constants.js";
+import { AllPages as l, ClickableChevronLeft as k, MiddleLayer as E, ClickableChevronRight as I } from "./styles.js";
+const L = ({ pageNumber: i, setPageNumber: o, totalPages: n, size: x = v }) => {
+  const d = () => {
+    i > 1 && o(i - 1);
+  }, s = () => {
+    i < n && o(i + 1);
+  }, f = z[x], r = R[x];
+  return n <= 7 ? /* @__PURE__ */ c.jsxs(l, { children: [
+    /* @__PURE__ */ c.jsx(k, { size: r, onClick: d }),
+    /* @__PURE__ */ c.jsx(E, { size: `${n * f}rem`, children: C(1, n + 1).map(j(x, i, o)) }),
+    /* @__PURE__ */ c.jsx(I, { size: r, onClick: s })
+  ] }) : n < 10 || i < 4 || i > n - 3 && i <= n ? /* @__PURE__ */ c.jsxs(l, { children: [
+    /* @__PURE__ */ c.jsx(k, { size: r, onClick: d }),
+    /* @__PURE__ */ c.jsxs(E, { size: `${9 * f}rem`, children: [
+      C(1, 5).map(j(x, i, o)),
+      h(),
+      [n - 3, n - 2, n - 1, n].map(
+        j(x, i, o)
+      )
+    ] }),
+    /* @__PURE__ */ c.jsx(I, { size: r, onClick: s })
+  ] }) : /* @__PURE__ */ c.jsxs(l, { children: [
+    /* @__PURE__ */ c.jsx(k, { size: r, onClick: d }),
+    /* @__PURE__ */ c.jsxs(E, { size: `${9 * f}rem`, children: [
+      C(1, 3).map(j(x, i, o)),
+      h(),
+      [i - 1, i, i + 1].map(j(x, i, o)),
+      h(),
+      [n - 1, n].map(j(x, i, o))
+    ] }),
+    /* @__PURE__ */ c.jsx(I, { size: r, onClick: s })
   ] });
 };
 export {
-  R as default
+  L as default
 };
 //# sourceMappingURL=Pagination.js.map

package/dist/components/Pagination/Pagination.js.map

@@ -1 +1 @@
-{"version":3,"file":"Pagination.js","sources":["../../../src/components/Pagination/Pagination.jsx"],"sourcesContent":["// Libraries\nimport _range from 'lodash-es/range';\n\n// helpers\nimport { renderThreeDots, renderPageNum } from './helpers.jsx';\n\n// styles\nimport { AllPages, ClickableChevronLeft, ClickableChevronRight } from './styles';\n\nconst Pagination = ({ pageNumber, setPageNumber, totalPages }) => {\n  const setPrevPage = () => {\n    if (pageNumber > 1) {\n      setPageNumber(pageNumber - 1);\n    }\n  };\n\n  const setNextPage = () => {\n    if (pageNumber < totalPages) {\n      setPageNumber(pageNumber + 1);\n    }\n  };\n\n  if (totalPages <= 7) {\n    return (\n      <AllPages>\n        <ClickableChevronLeft onClick={setPrevPage} />\n        {_range(1, totalPages + 1).map(renderPageNum(pageNumber, setPageNumber))}\n        <ClickableChevronRight onClick={setPrevPage} />\n      </AllPages>\n    );\n  }\n\n  if (\n    totalPages < 10 ||\n    pageNumber < 4 ||\n    (pageNumber > totalPages - 3 && pageNumber <= totalPages)\n  ) {\n    return (\n      <AllPages>\n        <ClickableChevronLeft size={20} onClick={setPrevPage} />\n        {_range(1, 5).map(renderPageNum(pageNumber, setPageNumber))}\n        {renderThreeDots()}\n        {[totalPages - 3, totalPages - 2, totalPages - 1, totalPages].map(\n          renderPageNum(pageNumber, setPageNumber)\n        )}\n        <ClickableChevronRight size={20} onClick={setNextPage} />\n      </AllPages>\n    );\n  }\n\n  return (\n    <AllPages>\n      <ClickableChevronLeft size={20} onClick={setPrevPage} />\n      {_range(1, 3).map(renderPageNum(pageNumber, setPageNumber))}\n      {renderThreeDots()}\n      {[pageNumber - 1, pageNumber, pageNumber + 1].map(renderPageNum(pageNumber, setPageNumber))}\n      {renderThreeDots()}\n      {[totalPages - 1, totalPages].map(renderPageNum(pageNumber, setPageNumber))}\n      <ClickableChevronRight size={20} onClick={setNextPage} />\n    </AllPages>\n  );\n};\n\nexport default Pagination;\n"],"names":["Pagination","pageNumber","setPageNumber","totalPages","setPrevPage","setNextPage","AllPages","jsx","ClickableChevronLeft","_range","renderPageNum","ClickableChevronRight","renderThreeDots"],"mappings":";;;;AASA,MAAMA,IAAa,CAAC,EAAE,YAAAC,GAAY,eAAAC,GAAe,YAAAC,QAAiB;AAChE,QAAMC,IAAc,MAAM;AACxB,IAAIH,IAAa,KACfC,EAAcD,IAAa,CAAC;AAAA,EAEhC,GAEMI,IAAc,MAAM;AACxB,IAAIJ,IAAaE,KACfD,EAAcD,IAAa,CAAC;AAAA,EAEhC;AAEA,SAAIE,KAAc,2BAEbG,GAAA,EACC,UAAA;AAAA,IAAAC,gBAAAA,EAAAA,IAACC,GAAA,EAAqB,SAASJ,EAAA,CAAa;AAAA,IAC3CK,EAAO,GAAGN,IAAa,CAAC,EAAE,IAAIO,EAAcT,GAAYC,CAAa,CAAC;AAAA,IACvEK,gBAAAA,EAAAA,IAACI,GAAA,EAAsB,SAASP,EAAA,CAAa;AAAA,EAAA,GAC/C,IAKFD,IAAa,MACbF,IAAa,KACZA,IAAaE,IAAa,KAAKF,KAAcE,2BAG3CG,GAAA,EACC,UAAA;AAAA,IAAAC,gBAAAA,EAAAA,IAACC,GAAA,EAAqB,MAAM,IAAI,SAASJ,GAAa;AAAA,IACrDK,EAAO,GAAG,CAAC,EAAE,IAAIC,EAAcT,GAAYC,CAAa,CAAC;AAAA,IACzDU,EAAA;AAAA,IACA,CAACT,IAAa,GAAGA,IAAa,GAAGA,IAAa,GAAGA,CAAU,EAAE;AAAA,MAC5DO,EAAcT,GAAYC,CAAa;AAAA,IAAA;AAAA,IAEzCK,gBAAAA,EAAAA,IAACI,GAAA,EAAsB,MAAM,IAAI,SAASN,EAAA,CAAa;AAAA,EAAA,GACzD,2BAKDC,GAAA,EACC,UAAA;AAAA,IAAAC,gBAAAA,EAAAA,IAACC,GAAA,EAAqB,MAAM,IAAI,SAASJ,GAAa;AAAA,IACrDK,EAAO,GAAG,CAAC,EAAE,IAAIC,EAAcT,GAAYC,CAAa,CAAC;AAAA,IACzDU,EAAA;AAAA,IACA,CAACX,IAAa,GAAGA,GAAYA,IAAa,CAAC,EAAE,IAAIS,EAAcT,GAAYC,CAAa,CAAC;AAAA,IACzFU,EAAA;AAAA,IACA,CAACT,IAAa,GAAGA,CAAU,EAAE,IAAIO,EAAcT,GAAYC,CAAa,CAAC;AAAA,IAC1EK,gBAAAA,EAAAA,IAACI,GAAA,EAAsB,MAAM,IAAI,SAASN,EAAA,CAAa;AAAA,EAAA,GACzD;AAEJ;"}
+{"version":3,"file":"Pagination.js","sources":["../../../src/components/Pagination/Pagination.jsx"],"sourcesContent":["// Libraries\nimport _range from 'lodash-es/range';\n\n// helpers\nimport { renderThreeDots, renderPageNum } from './helpers.jsx';\n\n// constants\nimport { ICON_SIZE_MAPPING, LARGE, MEDIUM, SIZE_REM_MAPPING, SMALL } from './constants.js';\n\n// styles\nimport { AllPages, ClickableChevronLeft, ClickableChevronRight, MiddleLayer } from './styles';\n\nconst Pagination = ({ pageNumber, setPageNumber, totalPages, size = LARGE }) => {\n  const setPrevPage = () => {\n    if (pageNumber > 1) {\n      setPageNumber(pageNumber - 1);\n    }\n  };\n\n  const setNextPage = () => {\n    if (pageNumber < totalPages) {\n      setPageNumber(pageNumber + 1);\n    }\n  };\n\n  const individualRemSize = SIZE_REM_MAPPING[size];\n  const iconSize = ICON_SIZE_MAPPING[size];\n\n  if (totalPages <= 7) {\n    return (\n      <AllPages>\n        <ClickableChevronLeft size={iconSize} onClick={setPrevPage} />\n        <MiddleLayer size={`${totalPages * individualRemSize}rem`}>\n          {_range(1, totalPages + 1).map(renderPageNum(size, pageNumber, setPageNumber))}\n        </MiddleLayer>\n        <ClickableChevronRight size={iconSize} onClick={setNextPage} />\n      </AllPages>\n    );\n  }\n\n  if (\n    totalPages < 10 ||\n    pageNumber < 4 ||\n    (pageNumber > totalPages - 3 && pageNumber <= totalPages)\n  ) {\n    return (\n      <AllPages>\n        <ClickableChevronLeft size={iconSize} onClick={setPrevPage} />\n        <MiddleLayer size={`${9 * individualRemSize}rem`}>\n          {_range(1, 5).map(renderPageNum(size, pageNumber, setPageNumber))}\n          {renderThreeDots()}\n          {[totalPages - 3, totalPages - 2, totalPages - 1, totalPages].map(\n            renderPageNum(size, pageNumber, setPageNumber)\n          )}\n        </MiddleLayer>\n        <ClickableChevronRight size={iconSize} onClick={setNextPage} />\n      </AllPages>\n    );\n  }\n\n  return (\n    <AllPages>\n      <ClickableChevronLeft size={iconSize} onClick={setPrevPage} />\n      <MiddleLayer size={`${9 * individualRemSize}rem`}>\n        {_range(1, 3).map(renderPageNum(size, pageNumber, setPageNumber))}\n        {renderThreeDots()}\n        {[pageNumber - 1, pageNumber, pageNumber + 1].map(renderPageNum(size, pageNumber, setPageNumber))}\n        {renderThreeDots()}\n        {[totalPages - 1, totalPages].map(renderPageNum(size, pageNumber, setPageNumber))}\n      </MiddleLayer>\n      <ClickableChevronRight size={iconSize} onClick={setNextPage} />\n    </AllPages>\n  );\n};\n\nexport default Pagination;\n"],"names":["Pagination","pageNumber","setPageNumber","totalPages","size","LARGE","setPrevPage","setNextPage","individualRemSize","SIZE_REM_MAPPING","iconSize","ICON_SIZE_MAPPING","AllPages","jsx","ClickableChevronLeft","MiddleLayer","_range","renderPageNum","ClickableChevronRight","renderThreeDots"],"mappings":";;;;;AAYA,MAAMA,IAAa,CAAC,EAAE,YAAAC,GAAY,eAAAC,GAAe,YAAAC,GAAY,MAAAC,IAAOC,QAAY;AAC9E,QAAMC,IAAc,MAAM;AACxB,IAAIL,IAAa,KACfC,EAAcD,IAAa,CAAC;AAAA,EAEhC,GAEMM,IAAc,MAAM;AACxB,IAAIN,IAAaE,KACfD,EAAcD,IAAa,CAAC;AAAA,EAEhC,GAEMO,IAAoBC,EAAiBL,CAAI,GACzCM,IAAWC,EAAkBP,CAAI;AAEvC,SAAID,KAAc,2BAEbS,GAAA,EACC,UAAA;AAAA,IAAAC,gBAAAA,EAAAA,IAACC,GAAA,EAAqB,MAAMJ,GAAU,SAASJ,GAAa;AAAA,0BAC3DS,GAAA,EAAY,MAAM,GAAGZ,IAAaK,CAAiB,OACjD,UAAAQ,EAAO,GAAGb,IAAa,CAAC,EAAE,IAAIc,EAAcb,GAAMH,GAAYC,CAAa,CAAC,GAC/E;AAAA,IACAW,gBAAAA,EAAAA,IAACK,GAAA,EAAsB,MAAMR,GAAU,SAASH,EAAA,CAAa;AAAA,EAAA,GAC/D,IAKFJ,IAAa,MACbF,IAAa,KACZA,IAAaE,IAAa,KAAKF,KAAcE,2BAG3CS,GAAA,EACC,UAAA;AAAA,IAAAC,gBAAAA,EAAAA,IAACC,GAAA,EAAqB,MAAMJ,GAAU,SAASJ,GAAa;AAAA,2BAC3DS,GAAA,EAAY,MAAM,GAAG,IAAIP,CAAiB,OACxC,UAAA;AAAA,MAAAQ,EAAO,GAAG,CAAC,EAAE,IAAIC,EAAcb,GAAMH,GAAYC,CAAa,CAAC;AAAA,MAC/DiB,EAAA;AAAA,MACA,CAAChB,IAAa,GAAGA,IAAa,GAAGA,IAAa,GAAGA,CAAU,EAAE;AAAA,QAC5Dc,EAAcb,GAAMH,GAAYC,CAAa;AAAA,MAAA;AAAA,IAC/C,GACF;AAAA,IACAW,gBAAAA,EAAAA,IAACK,GAAA,EAAsB,MAAMR,GAAU,SAASH,EAAA,CAAa;AAAA,EAAA,GAC/D,2BAKDK,GAAA,EACC,UAAA;AAAA,IAAAC,gBAAAA,EAAAA,IAACC,GAAA,EAAqB,MAAMJ,GAAU,SAASJ,GAAa;AAAA,2BAC3DS,GAAA,EAAY,MAAM,GAAG,IAAIP,CAAiB,OACxC,UAAA;AAAA,MAAAQ,EAAO,GAAG,CAAC,EAAE,IAAIC,EAAcb,GAAMH,GAAYC,CAAa,CAAC;AAAA,MAC/DiB,EAAA;AAAA,MACA,CAAClB,IAAa,GAAGA,GAAYA,IAAa,CAAC,EAAE,IAAIgB,EAAcb,GAAMH,GAAYC,CAAa,CAAC;AAAA,MAC/FiB,EAAA;AAAA,MACA,CAAChB,IAAa,GAAGA,CAAU,EAAE,IAAIc,EAAcb,GAAMH,GAAYC,CAAa,CAAC;AAAA,IAAA,GAClF;AAAA,IACAW,gBAAAA,EAAAA,IAACK,GAAA,EAAsB,MAAMR,GAAU,SAASH,EAAA,CAAa;AAAA,EAAA,GAC/D;AAEJ;"}

package/dist/components/Pagination/constants.js

@@ -0,0 +1,22 @@
+const I = "small", _ = "medium", E = "large", M = {
+  [I]: 1.9,
+  [_]: 2.6,
+  [E]: 3.1
+}, S = {
+  [I]: 1,
+  [_]: 1.2,
+  [E]: 1.4
+}, L = {
+  [I]: 18,
+  [_]: 19,
+  [E]: 20
+};
+export {
+  S as FONT_SIZE_MAPPING,
+  L as ICON_SIZE_MAPPING,
+  E as LARGE,
+  _ as MEDIUM,
+  M as SIZE_REM_MAPPING,
+  I as SMALL
+};
+//# sourceMappingURL=constants.js.map

package/dist/components/Pagination/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","sources":["../../../src/components/Pagination/constants.js"],"sourcesContent":["const INDIVIDUAL_SMALL_REM_SIZE = 1.9;\nconst INDIVIDUAL_MEDIUM_REM_SIZE = 2.6;\nconst INDIVIDUAL_LARGE_REM_SIZE = 3.1;\n\nconst SMALL_FONT_SIZE = 1;\nconst MEDIUM_REM_FONT_SIZE = 1.2;\nconst LARGE_REM_FONT_SIZE = 1.4;\n\nconst SMALL_ICON_SIZE = 18;\nconst MEDIUM_ICON_SIZE = 19;\nconst LARGE_ICON_SIZE = 20;\n\nexport const SMALL = 'small';\nexport const MEDIUM = 'medium';\nexport const LARGE = 'large';\n\nexport const SIZE_REM_MAPPING = {\n  [SMALL]: INDIVIDUAL_SMALL_REM_SIZE,\n  [MEDIUM]: INDIVIDUAL_MEDIUM_REM_SIZE,\n  [LARGE]: INDIVIDUAL_LARGE_REM_SIZE,\n};\n\nexport const FONT_SIZE_MAPPING = {\n  [SMALL]: SMALL_FONT_SIZE,\n  [MEDIUM]: MEDIUM_REM_FONT_SIZE,\n  [LARGE]: LARGE_REM_FONT_SIZE,\n};\n\nexport const ICON_SIZE_MAPPING = {\n  [SMALL]: SMALL_ICON_SIZE,\n  [MEDIUM]: MEDIUM_ICON_SIZE,\n  [LARGE]: LARGE_ICON_SIZE,\n};\n"],"names":["SMALL","MEDIUM","LARGE","SIZE_REM_MAPPING","FONT_SIZE_MAPPING","ICON_SIZE_MAPPING"],"mappings":"AAYY,MAACA,IAAQ,SACRC,IAAS,UACTC,IAAQ,SAERC,IAAmB;AAAA,EAC9B,CAACH,CAAK,GAAG;AAAA,EACT,CAACC,CAAM,GAAG;AAAA,EACV,CAACC,CAAK,GAAG;AACX,GAEaE,IAAoB;AAAA,EAC/B,CAACJ,CAAK,GAAG;AAAA,EACT,CAACC,CAAM,GAAG;AAAA,EACV,CAACC,CAAK,GAAG;AACX,GAEaG,IAAoB;AAAA,EAC/B,CAACL,CAAK,GAAG;AAAA,EACT,CAACC,CAAM,GAAG;AAAA,EACV,CAACC,CAAK,GAAG;AACX;"}

package/dist/components/Pagination/helpers.js

@@ -1,25 +1,28 @@
 import { j as r } from "../../_virtual/jsx-runtime.js";
-import { Page as i, P as t } from "./styles.js";
-const l = (n, s) => (e) => {
-  const c = () => {
-    s(e);
+import { FONT_SIZE_MAPPING as m, SIZE_REM_MAPPING as l } from "./constants.js";
+import { Page as x, P as t } from "./styles.js";
+const a = (n, i, o) => (e) => {
+  const s = l[n], c = m[n], d = () => {
+    o(e);
   };
   return /* @__PURE__ */ r.jsx(
-    i,
+    x,
     {
-      "data-testid": n === e ? "current-page" : `test-${e}`,
-      isSelected: n === e,
-      onClick: c,
+      "data-testid": i === e ? "current-page" : `test-${e}`,
+      isSelected: i === e,
+      onClick: d,
+      individualRemSize: s,
+      fontRemSize: c,
       children: e
     }
   );
-}, x = () => /* @__PURE__ */ r.jsxs(r.Fragment, { children: [
+}, u = () => /* @__PURE__ */ r.jsxs(r.Fragment, { children: [
   /* @__PURE__ */ r.jsx(t, { children: "." }),
   /* @__PURE__ */ r.jsx(t, { children: "." }),
   /* @__PURE__ */ r.jsx(t, { children: "." })
 ] });
 export {
-  l as renderPageNum,
-  x as renderThreeDots
+  a as renderPageNum,
+  u as renderThreeDots
 };
 //# sourceMappingURL=helpers.js.map

package/dist/components/Pagination/helpers.js.map

@@ -1 +1 @@
-{"version":3,"file":"helpers.js","sources":["../../../src/components/Pagination/helpers.jsx"],"sourcesContent":["import { Page, P } from './styles';\n\nexport const renderPageNum = (selected, setPageNumber) => (page) => {\n  const clickHandler = () => {\n    setPageNumber(page);\n  };\n\n  return (\n    <Page\n      data-testid={selected === page ? 'current-page' : `test-${page}`}\n      isSelected={selected === page}\n      onClick={clickHandler}\n    >\n      {page}\n    </Page>\n  );\n};\n\nexport const renderThreeDots = () => (\n  <>\n    <P>.</P>\n    <P>.</P>\n    <P>.</P>\n  </>\n);\n"],"names":["renderPageNum","selected","setPageNumber","page","clickHandler","jsx","Page","renderThreeDots","jsxs","Fragment","P"],"mappings":";;AAEO,MAAMA,IAAgB,CAACC,GAAUC,MAAkB,CAACC,MAAS;AAClE,QAAMC,IAAe,MAAM;AACzB,IAAAF,EAAcC,CAAI;AAAA,EACpB;AAEA,SACEE,gBAAAA,EAAAA;AAAAA,IAACC;AAAA,IAAA;AAAA,MACC,eAAaL,MAAaE,IAAO,iBAAiB,QAAQA,CAAI;AAAA,MAC9D,YAAYF,MAAaE;AAAA,MACzB,SAASC;AAAA,MAER,UAAAD;AAAA,IAAA;AAAA,EAAA;AAGP,GAEaI,IAAkB,MAC7BC,gBAAAA,EAAAA,KAAAC,EAAAA,UAAA,EACE,UAAA;AAAA,EAAAJ,gBAAAA,EAAAA,IAACK,KAAE,UAAA,IAAA,CAAC;AAAA,EACJL,gBAAAA,EAAAA,IAACK,KAAE,UAAA,IAAA,CAAC;AAAA,EACJL,gBAAAA,EAAAA,IAACK,KAAE,UAAA,IAAA,CAAC;AAAA,EAAA,CACN;"}
+{"version":3,"file":"helpers.js","sources":["../../../src/components/Pagination/helpers.jsx"],"sourcesContent":["import { FONT_SIZE_MAPPING, SIZE_REM_MAPPING } from './constants';\nimport { Page, P } from './styles';\n\nexport const renderPageNum = (size, selected, setPageNumber) => (page) => {\n  const individualRemSize = SIZE_REM_MAPPING[size];\n  const fontRemSize = FONT_SIZE_MAPPING[size];\n\n  const clickHandler = () => {\n    setPageNumber(page);\n  };\n\n  return (\n    <Page\n      data-testid={selected === page ? 'current-page' : `test-${page}`}\n      isSelected={selected === page}\n      onClick={clickHandler}\n      {...{\n        individualRemSize,\n        fontRemSize,\n      }}\n    >\n      {page}\n    </Page>\n  );\n};\n\nexport const renderThreeDots = () => (\n  <>\n    <P>.</P>\n    <P>.</P>\n    <P>.</P>\n  </>\n);\n"],"names":["renderPageNum","size","selected","setPageNumber","page","individualRemSize","SIZE_REM_MAPPING","fontRemSize","FONT_SIZE_MAPPING","clickHandler","jsx","Page","renderThreeDots","jsxs","Fragment","P"],"mappings":";;;AAGO,MAAMA,IAAgB,CAACC,GAAMC,GAAUC,MAAkB,CAACC,MAAS;AACxE,QAAMC,IAAoBC,EAAiBL,CAAI,GACzCM,IAAcC,EAAkBP,CAAI,GAEpCQ,IAAe,MAAM;AACzB,IAAAN,EAAcC,CAAI;AAAA,EACpB;AAEA,SACEM,gBAAAA,EAAAA;AAAAA,IAACC;AAAA,IAAA;AAAA,MACC,eAAaT,MAAaE,IAAO,iBAAiB,QAAQA,CAAI;AAAA,MAC9D,YAAYF,MAAaE;AAAA,MACzB,SAASK;AAAA,MAEP,mBAAAJ;AAAA,MACA,aAAAE;AAAA,MAGD,UAAAH;AAAA,IAAA;AAAA,EAAA;AAGP,GAEaQ,IAAkB,MAC7BC,gBAAAA,EAAAA,KAAAC,EAAAA,UAAA,EACE,UAAA;AAAA,EAAAJ,gBAAAA,EAAAA,IAACK,KAAE,UAAA,IAAA,CAAC;AAAA,EACJL,gBAAAA,EAAAA,IAACK,KAAE,UAAA,IAAA,CAAC;AAAA,EACJL,gBAAAA,EAAAA,IAACK,KAAE,UAAA,IAAA,CAAC;AAAA,EAAA,CACN;"}

package/dist/components/Pagination/styles.js

@@ -1,41 +1,51 @@
-import r, { css as o } from "../../node_modules/styled-components/dist/styled-components.browser.esm.js";
+import t, { css as r } from "../../node_modules/styled-components/dist/styled-components.browser.esm.js";
 import i from "../Icons/ChevronLeft/ChevronLeft.js";
 import n from "../Icons/ChevronRight/ChevronRight.js";
-import { WHITE as c, TEAL as s, GREY as t } from "../../colors/index.js";
-const d = r.div`
+import { WHITE as c, TEAL as s, GREY as o } from "../../colors/index.js";
+const f = t.div`
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 0.6rem;
-  min-width: 175rem;
-  width: 175rem;
-`, h = r.div`
-  height: 3rem;
-  width: 3rem;
+  min-width: 100%;
+  width: 100%;
+`, p = t.div`
+  height: ${({ individualRemSize: e }) => `${e}rem`};
+  width: ${({ individualRemSize: e }) => `${e}rem`};
   border-radius: 50%;
-  padding-top: 0.6rem;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  justify-content: center;
   text-align: center;
-  font-size: 1.4rem;
-  ${({ isSelected: e }) => e ? o`
+  font-size: ${({ fontRemSize: e }) => e}rem;
+  ${({ isSelected: e }) => e ? r`
           cursor: auto;
           color: ${c};
           background-color: ${s};
-        ` : o`
+        ` : r`
           cursor: pointer;
-          color: ${t};
+          color: ${o};
         `}
-`, g = r.p`
-  color: ${t};
-`, f = r(i)`
+
+`, h = t.p`
+  color: ${o};
+`, g = t(i)`
   cursor: pointer;
-`, u = r(n)`
+`, u = t(n)`
   cursor: pointer;
+`, $ = t.div`
+  min-width: ${({ size: e }) => e};
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
 `;
 export {
-  d as AllPages,
-  f as ClickableChevronLeft,
+  f as AllPages,
+  g as ClickableChevronLeft,
   u as ClickableChevronRight,
-  g as P,
-  h as Page
+  $ as MiddleLayer,
+  h as P,
+  p as Page
 };
 //# sourceMappingURL=styles.js.map

package/dist/components/Pagination/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sources":["../../../src/components/Pagination/styles.js"],"sourcesContent":["// Libraries\nimport styled, { css } from 'styled-components';\n\n// Icons\nimport ChevronLeft from '../Icons/ChevronLeft';\nimport ChevronRight from '../Icons/ChevronRight';\n\n// constants\nimport { GREY, TEAL, WHITE } from '../../colors';\n\nexport const AllPages = styled.div`\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  gap: 0.6rem;\n  min-width: 175rem;\n  width: 175rem;\n`;\n\nexport const Page = styled.div`\n  height: 3rem;\n  width: 3rem;\n  border-radius: 50%;\n  padding-top: 0.6rem;\n  text-align: center;\n  font-size: 1.4rem;\n  ${({ isSelected }) =>\n    isSelected\n      ? css`\n          cursor: auto;\n          color: ${WHITE};\n          background-color: ${TEAL};\n        `\n      : css`\n          cursor: pointer;\n          color: ${GREY};\n        `}\n`;\n\nexport const P = styled.p`\n  color: ${GREY};\n`;\n\nexport const ClickableChevronLeft = styled(ChevronLeft)`\n  cursor: pointer;\n`;\n\nexport const ClickableChevronRight = styled(ChevronRight)`\n  cursor: pointer;\n`;\n"],"names":["AllPages","styled","Page","isSelected","css","WHITE","TEAL","GREY","P","ClickableChevronLeft","ChevronLeft","ClickableChevronRight","ChevronRight"],"mappings":";;;;AAUY,MAACA,IAAWC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GASlBC,IAAOD,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOvB,CAAC,EAAE,YAAAE,EAAU,MACbA,IACIC;AAAAA;AAAAA,mBAEWC,CAAK;AAAA,8BACMC,CAAI;AAAA,YAE1BF;AAAAA;AAAAA,mBAEWG,CAAI;AAAA,SACd;AAAA,GAGIC,IAAIP,EAAO;AAAA,WACbM,CAAI;AAAA,GAGFE,IAAuBR,EAAOS,CAAW;AAAA;AAAA,GAIzCC,IAAwBV,EAAOW,CAAY;AAAA;AAAA;"}
+{"version":3,"file":"styles.js","sources":["../../../src/components/Pagination/styles.js"],"sourcesContent":["// Libraries\nimport styled, { css } from 'styled-components';\n\n// Icons\nimport ChevronLeft from '../Icons/ChevronLeft';\nimport ChevronRight from '../Icons/ChevronRight';\n\n// constants\nimport { GREY, TEAL, WHITE } from '../../colors';\n\nexport const AllPages = styled.div`\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  gap: 0.6rem;\n  min-width: 100%;\n  width: 100%;\n`;\n\nexport const Page = styled.div`\n  height: ${({individualRemSize}) => `${individualRemSize}rem`};\n  width: ${({individualRemSize}) => `${individualRemSize}rem`};\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  flex-direction: column;\n  justify-content: center;\n  text-align: center;\n  font-size: ${({fontRemSize}) => fontRemSize}rem;\n  ${({ isSelected }) =>\n    isSelected\n      ? css`\n          cursor: auto;\n          color: ${WHITE};\n          background-color: ${TEAL};\n        `\n      : css`\n          cursor: pointer;\n          color: ${GREY};\n        `}\n\n`;\n        // :hover {\n        //   color: red;\n        // }\n\nexport const P = styled.p`\n  color: ${GREY};\n`;\n\nexport const ClickableChevronLeft = styled(ChevronLeft)`\n  cursor: pointer;\n`;\n\nexport const ClickableChevronRight = styled(ChevronRight)`\n  cursor: pointer;\n`;\n\nexport const MiddleLayer = styled.div`\n  min-width: ${({size}) => size};\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n`;\n"],"names":["AllPages","styled","Page","individualRemSize","fontRemSize","isSelected","css","WHITE","TEAL","GREY","P","ClickableChevronLeft","ChevronLeft","ClickableChevronRight","ChevronRight","MiddleLayer","size"],"mappings":";;;;AAUY,MAACA,IAAWC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GASlBC,IAAOD,EAAO;AAAA,YACf,CAAC,EAAC,mBAAAE,EAAiB,MAAM,GAAGA,CAAiB,KAAK;AAAA,WACnD,CAAC,EAAC,mBAAAA,EAAiB,MAAM,GAAGA,CAAiB,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAO9C,CAAC,EAAC,aAAAC,EAAW,MAAMA,CAAW;AAAA,IACzC,CAAC,EAAE,YAAAC,EAAU,MACbA,IACIC;AAAAA;AAAAA,mBAEWC,CAAK;AAAA,8BACMC,CAAI;AAAA,YAE1BF;AAAAA;AAAAA,mBAEWG,CAAI;AAAA,SACd;AAAA;AAAA,GAOIC,IAAIT,EAAO;AAAA,WACbQ,CAAI;AAAA,GAGFE,IAAuBV,EAAOW,CAAW;AAAA;AAAA,GAIzCC,IAAwBZ,EAAOa,CAAY;AAAA;AAAA,GAI3CC,IAAcd,EAAO;AAAA,eACnB,CAAC,EAAC,MAAAe,EAAI,MAAMA,CAAI;AAAA;AAAA;AAAA;AAAA;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "meticulous-ui",
-  "version": "1.0.4",
+  "version": "1.0.6",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "files": [
@@ -15,18 +15,31 @@
   },
   "keywords": [
     "react",
-    "components",
     "ui",
+    "icons",
+    "components",
+    "pagination",
     "meticulous-ui"
   ],
   "scripts": {
     "dev": "vite",
     "build": "vite build",
     "format": "npx prettier --write .",
-    "publish:latest": "npm run build && npm publish --access public"
+    "publish:latest": "npm run build && npm publish --access public",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "deploy-storybook": "gh-pages -d storybook-static"
   },
   "dependencies": {
     "@vitejs/plugin-react": "^5.0.4",
     "lodash-es": "^4.17.21"
+  },
+  "devDependencies": {
+    "@storybook/addon-docs": "^9.1.10",
+    "@storybook/react-vite": "^9.1.10",
+    "eslint-plugin-storybook": "^9.1.10",
+    "gh-pages": "^6.3.0",
+    "prop-types": "^15.8.1",
+    "storybook": "^9.1.10"
   }
 }

package/dist/components/Pagination/index.js

@@ -1,5 +0,0 @@
-import o from "./Pagination.js";
-export {
-  o as default
-};
-//# sourceMappingURL=index.js.map

package/dist/components/Pagination/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}