meticulous-ui 3.7.11 → 3.7.13

package/components/PageLoader/PageLoader.js

@@ -1,56 +1,55 @@
-import { jsx } from "react/jsx-runtime";
-import { blue } from "../../colors/blue.js";
-import green from "../../colors/green.js";
-import red from "../../colors/red.js";
-import yellow from "../../colors/yellow.js";
-import orange from "../../colors/orange.js";
-import { black } from "../../colors/black.js";
-import grey from "../../colors/grey.js";
-import violet from "../../colors/violet.js";
-import teal from "../../colors/teal.js";
-import purple from "../../colors/purple.js";
-import pink from "../../colors/pink.js";
-import styled, { keyframes } from "styled-components";
-const COLOR_SHADE_MAP = {
-  blue,
-  green,
-  red,
-  yellow,
-  orange,
-  black,
-  grey,
-  violet,
-  teal,
-  purple,
-  pink
-};
-const getColor = (clr) => {
-  var _a;
-  return (_a = COLOR_SHADE_MAP[clr]) != null ? _a : blue.m500;
-};
-const horizontalGrow = keyframes`
+import { jsx as l } from "react/jsx-runtime";
+import { blue as t } from "../../colors/blue.js";
+import n from "../../colors/green.js";
+import f from "../../colors/red.js";
+import p from "../../colors/yellow.js";
+import s from "../../colors/orange.js";
+import { black as c } from "../../colors/black.js";
+import g from "../../colors/grey.js";
+import d from "../../colors/violet.js";
+import u from "../../colors/teal.js";
+import b from "../../colors/purple.js";
+import k from "../../colors/pink.js";
+import v, { keyframes as w } from "styled-components";
+const x = {
+  blue: t,
+  green: n,
+  red: f,
+  yellow: p,
+  orange: s,
+  black: c,
+  grey: g,
+  violet: d,
+  teal: u,
+  purple: b,
+  pink: k
+}, y = (r) => {
+  var o;
+  return (o = x[r]) != null ? o : t.m500;
+}, L = w`
   0%   { transform: scaleX(0); }
   100% { transform: scaleX(1); }
-`;
-const PageLdr = /*@__PURE__*/styled.div`
+`, h = v.div`
   width: 90%;
   height: 3px;
-  background-color: ${({
-  $color
-}) => $color};
+  background-color: ${({ $color: r }) => r};
   transform-origin: left;
-  animation: ${horizontalGrow} 2.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
-`;
-const PageLoader = ({
-  theme = "blue",
-  color,
-  ...props
-}) => {
-  var _a;
-  const shade = getColor(theme);
-  const clr = color || ((_a = shade == null ? void 0 : shade.m500) != null ? _a : blue.m500);
-  return /* @__PURE__ */ jsx(PageLdr, { ...props, $color: clr, role: "progressbar", "aria-label": "Loading", "aria-valuemin": 0, "aria-valuemax": 100 });
+  animation: ${L} 2.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+`, M = ({ theme: r = "blue", color: o, ...a }) => {
+  var e;
+  const m = y(r), i = o || ((e = m == null ? void 0 : m.m500) != null ? e : t.m500);
+  return /* @__PURE__ */ l(
+    h,
+    {
+      ...a,
+      $color: i,
+      role: "progressbar",
+      "aria-label": "Loading",
+      "aria-valuemin": 0,
+      "aria-valuemax": 100
+    }
+  );
 };
 export {
-  PageLoader as default
+  M as default
 };

package/components/PageLoader/index.js

@@ -1,4 +1,4 @@
-import PageLoader from "./PageLoader.js";
+import e from "./PageLoader.js";
 export {
-  PageLoader as default
+  e as default
 };

package/components/Pagination/Pagination.js

@@ -1,32 +1,25 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { useRef, useEffect } from "react";
-import styled, { css } from "styled-components";
-import ChevronLeft from "../Icons/ChevronLeft.js";
-import ChevronRight from "../Icons/ChevronRight.js";
-import Ripple from "../Ripple/Ripple.js";
-import colors from "../../colors/colorMap.js";
-import teal from "../../colors/teal.js";
-import grey from "../../colors/grey.js";
-import white from "../../colors/white.js";
-import { black } from "../../colors/black.js";
-import { ICON_SIZE_MAPPING, MEDIUM, FONT_SIZE_MAPPING, SIZE_REM_MAPPING, SELECTED_BG, NOT_SELECTED_BG, ACTIVE_NOT_SELECTED_BG } from "./constants.js";
-const getShade = (type) => ({
-  $shades
-}) => {
-  if (["#FFFFFF"].includes($shades)) {
-    return black.m900;
-  }
-  if (type === SELECTED_BG) {
-    return $shades["m600"];
-  }
-  if (type === NOT_SELECTED_BG) {
-    return $shades["m50"];
-  }
-  if (type === ACTIVE_NOT_SELECTED_BG) {
-    return $shades["m100"];
-  }
-};
-const AllPages = /*@__PURE__*/styled.nav`
+import { jsxs as $, jsx as i } from "react/jsx-runtime";
+import { useRef as L, useEffect as B } from "react";
+import f, { css as R } from "styled-components";
+import O from "../Icons/ChevronLeft.js";
+import z from "../Icons/ChevronRight.js";
+import b from "../Ripple/Ripple.js";
+import Z from "../../colors/colorMap.js";
+import U from "../../colors/teal.js";
+import j from "../../colors/grey.js";
+import M from "../../colors/white.js";
+import { black as q } from "../../colors/black.js";
+import { ICON_SIZE_MAPPING as H, MEDIUM as V, FONT_SIZE_MAPPING as J, SIZE_REM_MAPPING as G, SELECTED_BG as I, NOT_SELECTED_BG as T, ACTIVE_NOT_SELECTED_BG as K } from "./constants.js";
+const v = (e) => ({ $shades: o }) => {
+  if (["#FFFFFF"].includes(o))
+    return q.m900;
+  if (e === I)
+    return o.m600;
+  if (e === T)
+    return o.m50;
+  if (e === K)
+    return o.m100;
+}, A = f.nav`
   display: flex;
   justify-content: center;
   align-items: center;
@@ -34,68 +27,55 @@ const AllPages = /*@__PURE__*/styled.nav`
   min-width: 100%;
   width: 100%;
 
-  ${({
-  $isDisabled
-}) => $isDisabled && css`
+  ${({ $isDisabled: e }) => e && R`
       pointer-events: none;
       opacity: 0.4;
     `};
-`;
-const Page = /*@__PURE__*/styled.button`
+`, Q = f.button`
   border: none;
   padding: 0;
   font-family: inherit;
   outline-offset: 2px;
 
-  height: ${({
-  $individualRemSize
-}) => `${$individualRemSize}rem`};
-  width: ${({
-  $individualRemSize
-}) => `${$individualRemSize}rem`};
+  height: ${({ $individualRemSize: e }) => `${e}rem`};
+  width: ${({ $individualRemSize: e }) => `${e}rem`};
   border-radius: 50%;
   display: flex;
   align-items: center;
   flex-direction: column;
   justify-content: center;
   text-align: center;
-  font-size: ${({
-  $fontRemSize
-}) => $fontRemSize}rem;
-  ${({
-  $isSelected
-}) => $isSelected ? css`
+  font-size: ${({ $fontRemSize: e }) => e}rem;
+  ${({ $isSelected: e }) => e ? R`
           cursor: auto;
-          color: ${white};
-          background-color: ${getShade(SELECTED_BG)};
+          color: ${M};
+          background-color: ${v(I)};
 
           &:focus-visible {
-            outline: 1px solid ${getShade(SELECTED_BG)};
+            outline: 1px solid ${v(I)};
           }
-        ` : css`
+        ` : R`
           cursor: pointer;
-          color: ${grey.m500};
+          color: ${j.m500};
 
           &:hover {
-            background-color: ${getShade(NOT_SELECTED_BG)};
+            background-color: ${v(T)};
           }
 
           &:active {
-            background-color: ${getShade(ACTIVE_NOT_SELECTED_BG)};
-            color: ${white};
+            background-color: ${v(K)};
+            color: ${M};
           }
 
           &:focus-visible {
-            outline: 1px solid ${getShade(NOT_SELECTED_BG)};
+            outline: 1px solid ${v(T)};
           }
         `}
-`;
-const Ellipsis = /*@__PURE__*/styled.span`
-  color: ${grey.m700};
+`, W = f.span`
+  color: ${j.m700};
   font-size: 1.4rem;
   user-select: none;
-`;
-const ArrowButton = /*@__PURE__*/styled.button`
+`, P = f.button`
   border: none;
   background: none;
   padding: 0;
@@ -107,194 +87,125 @@ const ArrowButton = /*@__PURE__*/styled.button`
   outline-offset: 2px;
 
   &:focus-visible {
-    outline: 1px solid ${({
-  $shades
-}) => $shades == null ? void 0 : $shades["m600"]};
+    outline: 1px solid ${({ $shades: e }) => e == null ? void 0 : e.m600};
   }
-`;
-const ClickableChevronLeft = /*@__PURE__*/styled(ChevronLeft)`
+`, X = f(O)`
   cursor: pointer;
-`;
-const ClickableChevronRight = /*@__PURE__*/styled(ChevronRight)`
+`, Y = f(z)`
   cursor: pointer;
-`;
-const MiddleLayer = /*@__PURE__*/styled.div`
-  min-width: ${({
-  size
-}) => size};
+`, D = f.div`
+  min-width: ${({ size: e }) => e};
   display: flex;
   align-items: center;
   justify-content: space-between;
-`;
-const renderPageNum = ({
-  size,
-  selected,
-  shades,
-  changePage
-}) => (page) => {
-  const $individualRemSize = SIZE_REM_MAPPING[size];
-  const $fontRemSize = FONT_SIZE_MAPPING[size];
-  const $shades = shades;
-  const isSelected = selected === page;
-  const clickHandler = () => {
-    changePage(page);
-  };
-  const handleKeyDown = (e) => {
-    if (e.key === "Enter" || e.key === " ") {
-      e.preventDefault();
-      clickHandler();
-    }
+`, h = ({ size: e, selected: o, shades: n, changePage: x }) => (r) => {
+  const p = G[e], y = J[e], a = n, l = o === r, c = () => {
+    x(r);
+  }, u = (d) => {
+    (d.key === "Enter" || d.key === " ") && (d.preventDefault(), c());
   };
-  return /* @__PURE__ */ jsx(Page, { "data-testid": isSelected ? "current-page" : `test-${page}`, $isSelected: isSelected, onClick: clickHandler, onKeyDown: handleKeyDown, tabIndex: isSelected ? 0 : -1, "aria-label": `Page ${page}`, "aria-current": isSelected ? "page" : void 0, ...{
-    $shades,
-    $individualRemSize,
-    $fontRemSize
-  }, children: page }, `page_${page}`);
-};
-const renderThreeDots = () => /* @__PURE__ */ jsx(Ellipsis, { "aria-hidden": "true", children: "…" });
-const PrevArrow = ({
-  iconSize,
-  shades,
-  setPrevPage
-}) => /* @__PURE__ */ jsx(ArrowButton, { onClick: setPrevPage, "aria-label": "Previous page", $shades: shades, children: /* @__PURE__ */ jsx(Ripple, { rippleColor: shades["m50"], children: /* @__PURE__ */ jsx(ClickableChevronLeft, { size: iconSize, "aria-hidden": "true" }) }) });
-const NextArrow = ({
-  iconSize,
-  shades,
-  setNextPage
-}) => /* @__PURE__ */ jsx(ArrowButton, { onClick: setNextPage, "aria-label": "Next page", $shades: shades, children: /* @__PURE__ */ jsx(Ripple, { rippleColor: shades["m50"], children: /* @__PURE__ */ jsx(ClickableChevronRight, { size: iconSize, "aria-hidden": "true" }) }) });
-const Pagination = ({
-  pageNumber,
-  setPageNumber,
-  totalPages,
-  theme = "lime",
-  size = MEDIUM,
-  isDisabled = false,
-  ...rest
+  return /* @__PURE__ */ i(
+    Q,
+    {
+      "data-testid": l ? "current-page" : `test-${r}`,
+      $isSelected: l,
+      onClick: c,
+      onKeyDown: u,
+      tabIndex: l ? 0 : -1,
+      "aria-label": `Page ${r}`,
+      "aria-current": l ? "page" : void 0,
+      $shades: a,
+      $individualRemSize: p,
+      $fontRemSize: y,
+      children: r
+    },
+    `page_${r}`
+  );
+}, S = () => /* @__PURE__ */ i(W, { "aria-hidden": "true", children: "…" }), _ = ({ iconSize: e, shades: o, setPrevPage: n }) => /* @__PURE__ */ i(P, { onClick: n, "aria-label": "Previous page", $shades: o, children: /* @__PURE__ */ i(b, { rippleColor: o.m50, children: /* @__PURE__ */ i(X, { size: e, "aria-hidden": "true" }) }) }), k = ({ iconSize: e, shades: o, setNextPage: n }) => /* @__PURE__ */ i(P, { onClick: n, "aria-label": "Next page", $shades: o, children: /* @__PURE__ */ i(b, { rippleColor: o.m50, children: /* @__PURE__ */ i(Y, { size: e, "aria-hidden": "true" }) }) }), fe = ({
+  pageNumber: e,
+  setPageNumber: o,
+  totalPages: n,
+  theme: x = "lime",
+  size: r = V,
+  isDisabled: p = !1,
+  ...y
 }) => {
-  var _a;
-  const navRef = useRef(null);
-  const focusActiveRef = useRef(false);
-  useEffect(() => {
-    var _a2, _b;
-    if (focusActiveRef.current) {
-      focusActiveRef.current = false;
-      (_b = (_a2 = navRef.current) == null ? void 0 : _a2.querySelector('[aria-current="page"]')) == null ? void 0 : _b.focus();
+  var F;
+  const a = L(null), l = L(!1);
+  B(() => {
+    var s, w;
+    l.current && (l.current = !1, (w = (s = a.current) == null ? void 0 : s.querySelector('[aria-current="page"]')) == null || w.focus());
+  }, [e]);
+  const c = (s) => {
+    s !== e && o(s);
+  }, u = () => {
+    e > 1 && c(e - 1);
+  }, d = () => {
+    e < n && c(e + 1);
+  }, E = (s) => {
+    ["ArrowLeft", "ArrowUp"].includes(s.code) && (l.current = !0, u()), ["ArrowRight", "ArrowDown"].includes(s.code) && (l.current = !0, d());
+  }, t = (F = Z[x]) != null ? F : U, C = G[r], m = H[r];
+  return n <= 7 ? /* @__PURE__ */ $(
+    A,
+    {
+      ref: a,
+      onKeyDown: E,
+      "aria-label": "Pagination",
+      $isDisabled: p,
+      ...y,
+      children: [
+        /* @__PURE__ */ i(_, { iconSize: m, shades: t, setPrevPage: u }),
+        /* @__PURE__ */ i(D, { size: `${n * C}rem`, children: Array.from({ length: n }, (s, w) => w + 1).map(
+          h({ size: r, selected: e, shades: t, changePage: c })
+        ) }),
+        /* @__PURE__ */ i(k, { iconSize: m, shades: t, setNextPage: d })
+      ]
     }
-  }, [pageNumber]);
-  const changePage = (newPage) => {
-    if (newPage !== pageNumber) {
-      setPageNumber(newPage);
+  ) : n < 10 || e < 4 || e > n - 3 && e <= n ? /* @__PURE__ */ $(
+    A,
+    {
+      ref: a,
+      onKeyDown: E,
+      "aria-label": "Pagination",
+      $isDisabled: p,
+      ...y,
+      children: [
+        /* @__PURE__ */ i(_, { iconSize: m, shades: t, setPrevPage: u }),
+        /* @__PURE__ */ $(D, { size: `${9 * C}rem`, children: [
+          [1, 2, 3, 4].map(h({ size: r, selected: e, shades: t, changePage: c })),
+          S(),
+          [n - 3, n - 2, n - 1, n].map(
+            h({ size: r, selected: e, shades: t, changePage: c })
+          )
+        ] }),
+        /* @__PURE__ */ i(k, { iconSize: m, shades: t, setNextPage: d })
+      ]
     }
-  };
-  const setPrevPage = () => {
-    if (pageNumber > 1) {
-      changePage(pageNumber - 1);
-    }
-  };
-  const setNextPage = () => {
-    if (pageNumber < totalPages) {
-      changePage(pageNumber + 1);
-    }
-  };
-  const handleKeyDown = (e) => {
-    if (["ArrowLeft", "ArrowUp"].includes(e.code)) {
-      focusActiveRef.current = true;
-      setPrevPage();
+  ) : /* @__PURE__ */ $(
+    A,
+    {
+      ref: a,
+      onKeyDown: E,
+      "aria-label": "Pagination",
+      $isDisabled: p,
+      children: [
+        /* @__PURE__ */ i(_, { iconSize: m, shades: t, setPrevPage: u }),
+        /* @__PURE__ */ $(D, { size: `${9 * C}rem`, children: [
+          [1, 2].map(h({ size: r, selected: e, shades: t, changePage: c })),
+          e > 4 && S(),
+          [e - 1, e, e + 1].map(
+            h({ size: r, selected: e, shades: t, changePage: c })
+          ),
+          e < n - 3 && S(),
+          [n - 1, n].map(
+            h({ size: r, selected: e, shades: t, changePage: c })
+          )
+        ] }),
+        /* @__PURE__ */ i(k, { iconSize: m, shades: t, setNextPage: d })
+      ]
     }
-    if (["ArrowRight", "ArrowDown"].includes(e.code)) {
-      focusActiveRef.current = true;
-      setNextPage();
-    }
-  };
-  const shades = (_a = colors[theme]) != null ? _a : teal;
-  const individualRemSize = SIZE_REM_MAPPING[size];
-  const iconSize = ICON_SIZE_MAPPING[size];
-  if (totalPages <= 7) {
-    return /* @__PURE__ */ jsxs(AllPages, { ref: navRef, onKeyDown: handleKeyDown, "aria-label": "Pagination", $isDisabled: isDisabled, ...rest, children: [
-      /* @__PURE__ */ jsx(PrevArrow, { ...{
-        iconSize,
-        shades,
-        setPrevPage
-      } }),
-      /* @__PURE__ */ jsx(MiddleLayer, { size: `${totalPages * individualRemSize}rem`, children: Array.from({
-        length: totalPages
-      }, (_, i) => i + 1).map(renderPageNum({
-        size,
-        selected: pageNumber,
-        shades,
-        changePage
-      })) }),
-      /* @__PURE__ */ jsx(NextArrow, { ...{
-        iconSize,
-        shades,
-        setNextPage
-      } })
-    ] });
-  }
-  if (totalPages < 10 || pageNumber < 4 || pageNumber > totalPages - 3 && pageNumber <= totalPages) {
-    return /* @__PURE__ */ jsxs(AllPages, { ref: navRef, onKeyDown: handleKeyDown, "aria-label": "Pagination", $isDisabled: isDisabled, ...rest, children: [
-      /* @__PURE__ */ jsx(PrevArrow, { ...{
-        iconSize,
-        shades,
-        setPrevPage
-      } }),
-      /* @__PURE__ */ jsxs(MiddleLayer, { size: `${9 * individualRemSize}rem`, children: [
-        [1, 2, 3, 4].map(renderPageNum({
-          size,
-          selected: pageNumber,
-          shades,
-          changePage
-        })),
-        renderThreeDots(),
-        [totalPages - 3, totalPages - 2, totalPages - 1, totalPages].map(renderPageNum({
-          size,
-          selected: pageNumber,
-          shades,
-          changePage
-        }))
-      ] }),
-      /* @__PURE__ */ jsx(NextArrow, { ...{
-        iconSize,
-        shades,
-        setNextPage
-      } })
-    ] });
-  }
-  return /* @__PURE__ */ jsxs(AllPages, { ref: navRef, onKeyDown: handleKeyDown, "aria-label": "Pagination", $isDisabled: isDisabled, children: [
-    /* @__PURE__ */ jsx(PrevArrow, { ...{
-      iconSize,
-      shades,
-      setPrevPage
-    } }),
-    /* @__PURE__ */ jsxs(MiddleLayer, { size: `${9 * individualRemSize}rem`, children: [
-      [1, 2].map(renderPageNum({
-        size,
-        selected: pageNumber,
-        shades,
-        changePage
-      })),
-      pageNumber > 4 && renderThreeDots(),
-      [pageNumber - 1, pageNumber, pageNumber + 1].map(renderPageNum({
-        size,
-        selected: pageNumber,
-        shades,
-        changePage
-      })),
-      pageNumber < totalPages - 3 && renderThreeDots(),
-      [totalPages - 1, totalPages].map(renderPageNum({
-        size,
-        selected: pageNumber,
-        shades,
-        changePage
-      }))
-    ] }),
-    /* @__PURE__ */ jsx(NextArrow, { ...{
-      iconSize,
-      shades,
-      setNextPage
-    } })
-  ] });
+  );
 };
 export {
-  Pagination as default
+  fe as default
 };

package/components/Pagination/constants.js

@@ -1,41 +1,24 @@
-const INDIVIDUAL_SMALL_REM_SIZE = 3.4;
-const INDIVIDUAL_MEDIUM_REM_SIZE = 4.2;
-const INDIVIDUAL_LARGE_REM_SIZE = 5;
-const SMALL_FONT_SIZE = 1.5;
-const MEDIUM_REM_FONT_SIZE = 1.7;
-const LARGE_REM_FONT_SIZE = 1.9;
-const SMALL_ICON_SIZE = 23;
-const MEDIUM_ICON_SIZE = 25;
-const LARGE_ICON_SIZE = 27;
-const SMALL = "small";
-const MEDIUM = "medium";
-const LARGE = "large";
-const SIZE_REM_MAPPING = {
-  [SMALL]: INDIVIDUAL_SMALL_REM_SIZE,
-  [MEDIUM]: INDIVIDUAL_MEDIUM_REM_SIZE,
-  [LARGE]: INDIVIDUAL_LARGE_REM_SIZE
-};
-const FONT_SIZE_MAPPING = {
-  [SMALL]: SMALL_FONT_SIZE,
-  [MEDIUM]: MEDIUM_REM_FONT_SIZE,
-  [LARGE]: LARGE_REM_FONT_SIZE
-};
-const ICON_SIZE_MAPPING = {
-  [SMALL]: SMALL_ICON_SIZE,
-  [MEDIUM]: MEDIUM_ICON_SIZE,
-  [LARGE]: LARGE_ICON_SIZE
-};
-const SELECTED_BG = "selected_bg";
-const NOT_SELECTED_BG = "not_selected_bg";
-const ACTIVE_NOT_SELECTED_BG = "active_not_selected_bg";
+const _ = "small", I = "medium", E = "large", M = {
+  [_]: 3.4,
+  [I]: 4.2,
+  [E]: 5
+}, S = {
+  [_]: 1.5,
+  [I]: 1.7,
+  [E]: 1.9
+}, L = {
+  [_]: 23,
+  [I]: 25,
+  [E]: 27
+}, t = "selected_bg", N = "not_selected_bg", A = "active_not_selected_bg";
 export {
-  ACTIVE_NOT_SELECTED_BG,
-  FONT_SIZE_MAPPING,
-  ICON_SIZE_MAPPING,
-  LARGE,
-  MEDIUM,
-  NOT_SELECTED_BG,
-  SELECTED_BG,
-  SIZE_REM_MAPPING,
-  SMALL
+  A as ACTIVE_NOT_SELECTED_BG,
+  S as FONT_SIZE_MAPPING,
+  L as ICON_SIZE_MAPPING,
+  E as LARGE,
+  I as MEDIUM,
+  N as NOT_SELECTED_BG,
+  t as SELECTED_BG,
+  M as SIZE_REM_MAPPING,
+  _ as SMALL
 };

package/components/Pagination/index.js

@@ -1,4 +1,4 @@
-import Pagination from "./Pagination.js";
+import o from "./Pagination.js";
 export {
-  Pagination as default
+  o as default
 };