meticulous-ui 2.8.1 → 2.8.2

package/components/Pagination/helpers.js

@@ -1,31 +1,31 @@
 import { jsx as e } from "react/jsx-runtime";
 import c from "../Ripple/Ripple.js";
 import { FONT_SIZE_MAPPING as C, SIZE_REM_MAPPING as P } from "./constants.js";
-import { ArrowButton as d, ClickableChevronLeft as f, Page as k, ClickableChevronRight as v, Ellipsis as $ } from "./styles.js";
-const x = ({ size: r, selected: n, shades: t, changePage: s }) => (i) => {
-  const h = P[r], m = C[r], p = t, o = n === i, a = () => {
-    s(i);
+import { ArrowButton as d, ClickableChevronLeft as $, Page as f, ClickableChevronRight as k, Ellipsis as v } from "./styles.js";
+const x = ({ size: i, selected: r, shades: t, changePage: s }) => (n) => {
+  const h = P[i], m = C[i], p = t, o = r === n, a = () => {
+    s(n);
   }, u = (l) => {
     (l.key === "Enter" || l.key === " ") && (l.preventDefault(), a());
   };
   return /* @__PURE__ */ e(
-    k,
+    f,
     {
-      "data-testid": o ? "current-page" : `test-${i}`,
+      "data-testid": o ? "current-page" : `test-${n}`,
       $isSelected: o,
       onClick: a,
       onKeyDown: u,
       tabIndex: o ? 0 : -1,
-      "aria-label": `Page ${i}`,
+      "aria-label": `Page ${n}`,
       "aria-current": o ? "page" : void 0,
       $shades: p,
       $individualRemSize: h,
       $fontRemSize: m,
-      children: i
+      children: n
     },
-    `page_${i}`
+    `page_${n}`
   );
-}, A = () => /* @__PURE__ */ e($, { "aria-hidden": "true", children: "…" }), E = ({ iconSize: r, shades: n, setPrevPage: t }) => /* @__PURE__ */ e(d, { onClick: t, "aria-label": "Previous page", children: /* @__PURE__ */ e(c, { rippleColor: n.m50, children: /* @__PURE__ */ e(f, { size: r, "aria-hidden": "true" }) }) }), I = ({ iconSize: r, shades: n, setNextPage: t }) => /* @__PURE__ */ e(d, { onClick: t, "aria-label": "Next page", children: /* @__PURE__ */ e(c, { rippleColor: n.m50, children: /* @__PURE__ */ e(v, { size: r, "aria-hidden": "true" }) }) });
+}, A = () => /* @__PURE__ */ e(v, { "aria-hidden": "true", children: "…" }), E = ({ iconSize: i, shades: r, setPrevPage: t }) => /* @__PURE__ */ e(d, { onClick: t, "aria-label": "Previous page", $shades: r, children: /* @__PURE__ */ e(c, { rippleColor: r.m50, children: /* @__PURE__ */ e($, { size: i, "aria-hidden": "true" }) }) }), I = ({ iconSize: i, shades: r, setNextPage: t }) => /* @__PURE__ */ e(d, { onClick: t, "aria-label": "Next page", $shades: r, children: /* @__PURE__ */ e(c, { rippleColor: r.m50, children: /* @__PURE__ */ e(k, { size: i, "aria-hidden": "true" }) }) });
 export {
   I as NextArrow,
   E as PrevArrow,

package/components/Pagination/styles.js

@@ -1,20 +1,20 @@
-import o, { css as n } from "styled-components";
-import a from "../Icons/ChevronLeft/ChevronLeft.js";
-import f from "../Icons/ChevronRight/ChevronRight.js";
-import c from "../../colors/grey.js";
-import i from "../../colors/white.js";
-import u from "../../colors/black.js";
-import { SELECTED_BG as l, NOT_SELECTED_BG as s, ACTIVE_NOT_SELECTED_BG as m } from "./constants.js";
-const t = (e) => ({ $shades: r }) => {
-  if (["#FFFFFF"].includes(r))
-    return u.m900;
-  if (e === l)
-    return r.m500;
-  if (e === s)
-    return r.m50;
-  if (e === m)
-    return r.m100;
-}, E = o.nav`
+import r, { css as n } from "styled-components";
+import f from "../Icons/ChevronLeft/ChevronLeft.js";
+import s from "../Icons/ChevronRight/ChevronRight.js";
+import l from "../../colors/grey.js";
+import c from "../../colors/white.js";
+import a from "../../colors/black.js";
+import { SELECTED_BG as i, NOT_SELECTED_BG as m, ACTIVE_NOT_SELECTED_BG as u } from "./constants.js";
+const t = (o) => ({ $shades: e }) => {
+  if (["#FFFFFF"].includes(e))
+    return a.m900;
+  if (o === i)
+    return e.m600;
+  if (o === m)
+    return e.m50;
+  if (o === u)
+    return e.m100;
+}, $ = r.nav`
   display: flex;
   justify-content: center;
   align-items: center;
@@ -22,46 +22,47 @@ const t = (e) => ({ $shades: r }) => {
   min-width: 100%;
   width: 100%;
 
-  ${({ $isDisabled: e }) => e && n`
+  ${({ $isDisabled: o }) => o && n`
       pointer-events: none;
       opacity: 0.4;
     `};
-`, C = o.button`
+`, h = r.button`
   border: none;
   padding: 0;
   font-family: inherit;
   outline-offset: 2px;
 
-  height: ${({ $individualRemSize: e }) => `${e}rem`};
-  width: ${({ $individualRemSize: e }) => `${e}rem`};
+  height: ${({ $individualRemSize: o }) => `${o}rem`};
+  width: ${({ $individualRemSize: o }) => `${o}rem`};
   border-radius: 50%;
   display: flex;
   align-items: center;
   flex-direction: column;
   justify-content: center;
   text-align: center;
-  font-size: ${({ $fontRemSize: e }) => e}rem;
-  ${({ $isSelected: e }) => e ? n`
+  font-size: ${({ $fontRemSize: o }) => o}rem;
+  ${({ $isSelected: o }) => o ? n`
           cursor: auto;
-          color: ${i};
-          background-color: ${t(l)};
+          color: ${c};
+          background-color: ${t(i)};
+          outline-color: ${t(i)};
         ` : n`
           cursor: pointer;
-          color: ${c.m500};
+          color: ${l.m500};
 
           &:hover {
-            background-color: ${t(s)};
+            background-color: ${t(m)};
           }
 
           &:active {
-            background-color: ${t(m)};
-            color: ${i};
+            background-color: ${t(u)};
+            color: ${c};
           }
         `}
-`, v = o.span`
-  color: ${c.m500};
+`, v = r.span`
+  color: ${l.m500};
   user-select: none;
-`, x = o.button`
+`, x = r.button`
   border: none;
   background: none;
   padding: 0;
@@ -71,22 +72,23 @@ const t = (e) => ({ $shades: r }) => {
   justify-content: center;
   border-radius: 50%;
   outline-offset: 2px;
-`, k = o(a)`
+  outline-color: ${({ $shades: o }) => o == null ? void 0 : o.m600};
+`, k = r(f)`
   cursor: pointer;
-`, w = o(f)`
+`, w = r(s)`
   cursor: pointer;
-`, F = o.div`
-  min-width: ${({ size: e }) => e};
+`, F = r.div`
+  min-width: ${({ size: o }) => o};
   display: flex;
   align-items: center;
   justify-content: space-between;
 `;
 export {
-  E as AllPages,
+  $ as AllPages,
   x as ArrowButton,
   k as ClickableChevronLeft,
   w as ClickableChevronRight,
   v as Ellipsis,
   F as MiddleLayer,
-  C as Page
+  h as Page
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "meticulous-ui",
-  "version": "2.8.1",
+  "version": "2.8.2",
   "license": "MIT",
   "description": "A comprehensive React UI component library with a wide range of customizable components, icons, colors, and utilities for building modern web applications.",
   "main": "./index.js",