meticulous-ui 1.0.14 → 1.0.15

package/dist/src/colors/deepOrange.js

@@ -0,0 +1,19 @@
+const F = {
+  m50: "#FBE9E7",
+  m100: "#FFCCBC",
+  m200: "#FFAB91",
+  m300: "#FF8A65",
+  m400: "#FF7043",
+  m500: "#FF5722",
+  m600: "#F4511E",
+  m700: "#E64A19",
+  m800: "#D84315",
+  m900: "#BF360C",
+  a100: "#FF9E80",
+  a200: "#FF6E40",
+  a400: "#FF3D00",
+  a700: "#DD2C00"
+};
+export {
+  F as default
+};

package/dist/src/colors/deepPurple.js

@@ -0,0 +1,19 @@
+const m = {
+  m50: "#EDE7F6",
+  m100: "#D1C4E9",
+  m200: "#B39DDB",
+  m300: "#9575CD",
+  m400: "#7E57C2",
+  m500: "#673AB7",
+  m600: "#5E35B1",
+  m700: "#512DA8",
+  m800: "#4527A0",
+  m900: "#311B92",
+  a100: "#B388FF",
+  a200: "#7C4DFF",
+  a400: "#651FFF",
+  a700: "#6200EA"
+};
+export {
+  m as default
+};

package/dist/src/colors/green.js

@@ -0,0 +1,19 @@
+const m = {
+  m50: "#E8F5E9",
+  m100: "#C8E6C9",
+  m200: "#A5D6A7",
+  m300: "#81C784",
+  m400: "#66BB6A",
+  m500: "#4CAF50",
+  m600: "#43A047",
+  m700: "#388E3C",
+  m800: "#2E7D32",
+  m900: "#1B5E20",
+  a100: "#B9F6CA",
+  a200: "#69F0AE",
+  a400: "#00E676",
+  a700: "#00C853"
+};
+export {
+  m as default
+};

package/dist/src/colors/grey.js

@@ -0,0 +1,15 @@
+const E = {
+  m50: "#FAFAFA",
+  m100: "#F5F5F5",
+  m200: "#EEEEEE",
+  m300: "#E0E0E0",
+  m400: "#BDBDBD",
+  m500: "#9E9E9E",
+  m600: "#757575",
+  m700: "#616161",
+  m800: "#424242",
+  m900: "#212121"
+};
+export {
+  E as default
+};

package/dist/src/colors/index.js

@@ -0,0 +1,51 @@
+import r from "./amber.js";
+import o from "./black.js";
+import m from "./blue.js";
+import i from "./blueGray.js";
+import t from "./brown.js";
+import p from "./cider.js";
+import e from "./cyan.js";
+import f from "./deepOrange.js";
+import l from "./deepPurple.js";
+import a from "./green.js";
+import n from "./grey.js";
+import g from "./indigo.js";
+import d from "./lightBlue.js";
+import u from "./lightGreen.js";
+import b from "./lime.js";
+import c from "./orange.js";
+import y from "./pink.js";
+import h from "./purple.js";
+import s from "./red.js";
+import w from "./teal.js";
+import k from "./violet.js";
+import G from "./white.js";
+import v from "./yellow.js";
+const U = {
+  amber: r,
+  black: o,
+  blue: m,
+  blueGray: i,
+  brown: t,
+  cider: p,
+  cyan: e,
+  deepOrange: f,
+  deepPurple: l,
+  green: a,
+  grey: n,
+  indigo: g,
+  lightBlue: d,
+  lightGreen: u,
+  lime: b,
+  orange: c,
+  pink: y,
+  purple: h,
+  red: s,
+  teal: w,
+  violet: k,
+  white: G,
+  yellow: v
+};
+export {
+  U as default
+};

package/dist/src/colors/indigo.js

@@ -0,0 +1,19 @@
+const F = {
+  m50: "#E8EAF6",
+  m100: "#C5CAE9",
+  m200: "#9FA8DA",
+  m300: "#7986CB",
+  m400: "#5C6BC0",
+  m500: "#3F51B5",
+  m600: "#3949AB",
+  m700: "#303F9F",
+  m800: "#283593",
+  m900: "#1A237E",
+  a100: "#8C9EFF",
+  a200: "#536DFE",
+  a400: "#3D5AFE",
+  a700: "#304FFE"
+};
+export {
+  F as default
+};

package/dist/src/colors/lightBlue.js

@@ -0,0 +1,19 @@
+const F = {
+  m50: "#E1F5FE",
+  m100: "#B3E5FC",
+  m200: "#81D4FA",
+  m300: "#4FC3F7",
+  m400: "#29B6F6",
+  m500: "#03A9F4",
+  m600: "#039BE5",
+  m700: "#0288D1",
+  m800: "#0277BD",
+  m900: "#01579B",
+  a100: "#80D8FF",
+  a200: "#40C4FF",
+  a400: "#00B0FF",
+  a700: "#0091EA"
+};
+export {
+  F as default
+};

package/dist/src/colors/lightGreen.js

@@ -0,0 +1,19 @@
+const m = {
+  m50: "#F1F8E9",
+  m100: "#DCEDC8",
+  m200: "#C5E1A5",
+  m300: "#AED581",
+  m400: "#9CCC65",
+  m500: "#8BC34A",
+  m600: "#7CB342",
+  m700: "#689F38",
+  m800: "#558B2F",
+  m900: "#33691E",
+  a100: "#CCFF90",
+  a200: "#B2FF59",
+  a400: "#76FF03",
+  a700: "#64DD17"
+};
+export {
+  m as default
+};

package/dist/src/colors/lime.js

@@ -0,0 +1,19 @@
+const F = {
+  m50: "#F9FBE7",
+  m100: "#F0F4C3",
+  m200: "#E6EE9C",
+  m300: "#DCE775",
+  m400: "#D4E157",
+  m500: "#CDDC39",
+  m600: "#C0CA33",
+  m700: "#AFB42B",
+  m800: "#9E9D24",
+  m900: "#827717",
+  a100: "#F4FF81",
+  a200: "#EEFF41",
+  a400: "#C6FF00",
+  a700: "#AEEA00"
+};
+export {
+  F as default
+};

package/dist/src/colors/orange.js

@@ -0,0 +1,19 @@
+const F = {
+  m50: "#FFF3E0",
+  m100: "#FFE0B2",
+  m200: "#FFCC80",
+  m300: "#FFB74D",
+  m400: "#FFA726",
+  m500: "#FF9800",
+  m600: "#FB8C00",
+  m700: "#F57C00",
+  m800: "#EF6C00",
+  m900: "#E65100",
+  a100: "#FFD180",
+  a200: "#FFAB40",
+  a400: "#FF9100",
+  a700: "#FF6D00"
+};
+export {
+  F as default
+};

package/dist/src/colors/pink.js

@@ -0,0 +1,19 @@
+const F = {
+  m50: "#FCE4EC",
+  m100: "#F8BBD0",
+  m200: "#F48FB1",
+  m300: "#F06292",
+  m400: "#EC407A",
+  m500: "#E91E63",
+  m600: "#D81B60",
+  m700: "#C2185B",
+  m800: "#AD1457",
+  m900: "#880E4F",
+  a100: "#FF80AB",
+  a200: "#FF4081",
+  a400: "#F50057",
+  a700: "#C51162"
+};
+export {
+  F as default
+};

package/dist/src/colors/purple.js

@@ -0,0 +1,19 @@
+const A = {
+  m50: "#F3E5F5",
+  m100: "#E1BEE7",
+  m200: "#CE93D8",
+  m300: "#BA68C8",
+  m400: "#AB47BC",
+  m500: "#9C27B0",
+  m600: "#8E24AA",
+  m700: "#7B1FA2",
+  m800: "#6A1B9A",
+  m900: "#4A148C",
+  a100: "#EA80FC",
+  a200: "#E040FB",
+  a400: "#D500F9",
+  a700: "#AA00FF"
+};
+export {
+  A as default
+};

package/dist/src/colors/red.js

@@ -0,0 +1,19 @@
+const F = {
+  m50: "#FFEBEE",
+  m100: "#FFCDD2",
+  m200: "#EF9A9A",
+  m300: "#E57373",
+  m400: "#EF5350",
+  m500: "#F44336",
+  m600: "#E53935",
+  m700: "#D32F2F",
+  m800: "#C62828",
+  m900: "#B71C1C",
+  a100: "#FF8A80",
+  a200: "#FF5252",
+  a400: "#FF1744",
+  a700: "#D50000"
+};
+export {
+  F as default
+};

package/dist/src/colors/teal.js

@@ -0,0 +1,19 @@
+const m = {
+  m50: "#E0F2F1",
+  m100: "#B2DFDB",
+  m200: "#80CBC4",
+  m300: "#4DB6AC",
+  m400: "#26A69A",
+  m500: "#009688",
+  m600: "#00897B",
+  m700: "#00796B",
+  m800: "#00695C",
+  m900: "#004D40",
+  a100: "#A7FFEB",
+  a200: "#64FFDA",
+  a400: "#1DE9B6",
+  a700: "#00BFA5"
+};
+export {
+  m as default
+};

package/dist/src/colors/violet.js

@@ -0,0 +1,19 @@
+const F = {
+  m50: "#F3E8FF",
+  m100: "#E1BFFF",
+  m200: "#CE96FF",
+  m300: "#BA6EFF",
+  m400: "#A955FF",
+  m500: "#933DFF",
+  m600: "#852AFF",
+  m700: "#7718FF",
+  m800: "#6800E6",
+  m900: "#4D00B3",
+  a100: "#D1A8FF",
+  a200: "#B36CFF",
+  a400: "#9400FF",
+  a700: "#7A00E6"
+};
+export {
+  F as default
+};

package/dist/src/colors/white.js

@@ -0,0 +1,4 @@
+const F = "#FFFFFF";
+export {
+  F as default
+};

package/dist/src/colors/yellow.js

@@ -0,0 +1,19 @@
+const F = {
+  m50: "#FFFDE7",
+  m100: "#FFF9C4",
+  m200: "#FFF59D",
+  m300: "#FFF176",
+  m400: "#FFEE58",
+  m500: "#FFEB3B",
+  m600: "#FDD835",
+  m700: "#FBC02D",
+  m800: "#F9A825",
+  m900: "#F57F17",
+  a100: "#FFFF8D",
+  a200: "#FFFF00",
+  a400: "#FFEA00",
+  a700: "#FFD600"
+};
+export {
+  F as default
+};

package/dist/src/components/Icons/ChevronLeft/ChevronLeft.js

@@ -0,0 +1,24 @@
+import { j as r } from "../../../../_virtual/jsx-runtime.js";
+import i from "../../../../node_modules/styled-components/dist/styled-components.browser.esm.js";
+import s from "../../../colors/grey.js";
+const l = i.img`
+  display: inline-block;
+  vertical-align: middle;
+  fill: ${({ color: o }) => o};
+`, a = (o) => {
+  const { color: e, size: t } = o;
+  return /* @__PURE__ */ r.jsx(
+    l,
+    {
+      ...o,
+      color: e || s.m500,
+      src: "https://www.svgrepo.com/show/533659/chevron-left.svg",
+      alt: "Chevron Left",
+      width: t,
+      height: t
+    }
+  );
+};
+export {
+  a as default
+};

package/dist/src/components/Icons/ChevronLeft/index.js

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

package/dist/src/components/Icons/ChevronRight/ChevronRight.js

@@ -0,0 +1,24 @@
+import { j as i } from "../../../../_virtual/jsx-runtime.js";
+import e from "../../../../node_modules/styled-components/dist/styled-components.browser.esm.js";
+import s from "../../../colors/grey.js";
+const l = e.img`
+  display: inline-block;
+  vertical-align: middle;
+  fill: ${({ color: o }) => o};
+`, c = (o) => {
+  const { color: r, size: t } = o;
+  return /* @__PURE__ */ i.jsx(
+    l,
+    {
+      ...o,
+      color: r || s.m500,
+      src: "https://www.svgrepo.com/show/533661/chevron-right.svg",
+      alt: "Chevron Right",
+      width: t,
+      height: t
+    }
+  );
+};
+export {
+  c as default
+};

package/dist/src/components/Icons/ChevronRight/index.js

@@ -0,0 +1,4 @@
+import r from "./ChevronRight.js";
+export {
+  r as default
+};

package/dist/src/components/Pagination/Pagination.js

@@ -0,0 +1,60 @@
+import { j as c } from "../../../_virtual/jsx-runtime.js";
+import K from "../../../node_modules/lodash-es/get.js";
+import h from "../../../node_modules/lodash-es/range.js";
+import { PrevArrow as w, renderPageNum as x, NextArrow as A, renderThreeDots as I } from "./helpers.js";
+import R from "../../colors/index.js";
+import S from "../../colors/teal.js";
+import { ICON_SIZE_MAPPING as _, MEDIUM as v, SIZE_REM_MAPPING as $ } from "./constants.js";
+import { AllPages as M, MiddleLayer as y } from "./styles.js";
+const k = ({
+  pageNumber: n,
+  setPageNumber: D,
+  totalPages: r,
+  theme: E = "lime",
+  size: i = v,
+  isDisabled: j = !1
+}) => {
+  const d = (e) => {
+    e !== n && D(e);
+  }, f = () => {
+    n > 1 && d(n - 1);
+  }, t = () => {
+    n < r && d(n + 1);
+  }, m = (e) => {
+    console.log({ e }), ["ArrowLeft", "ArrowUp"].includes(e.code) && f(), ["ArrowRight", "ArrowDown"].includes(e.code) && t();
+  }, o = K(R, E, S), l = $[i], s = _[i];
+  return r <= 7 ? /* @__PURE__ */ c.jsxs(M, { onKeyDown: m, tabIndex: "0", isDisabled: j, children: [
+    /* @__PURE__ */ c.jsx(w, { iconSize: s, shades: o, setPrevPage: f }),
+    /* @__PURE__ */ c.jsx(y, { size: `${r * l}rem`, children: h(1, r + 1).map(
+      x({ size: i, selected: n, shades: o, changePage: d })
+    ) }),
+    /* @__PURE__ */ c.jsx(A, { iconSize: s, shades: o, setNextPage: t })
+  ] }) : r < 10 || n < 4 || n > r - 3 && n <= r ? /* @__PURE__ */ c.jsxs(M, { onKeyDown: m, tabIndex: "0", isDisabled: j, children: [
+    /* @__PURE__ */ c.jsx(w, { iconSize: s, shades: o, setPrevPage: f }),
+    /* @__PURE__ */ c.jsxs(y, { size: `${9 * l}rem`, children: [
+      h(1, 5).map(x({ size: i, selected: n, shades: o, changePage: d })),
+      I(),
+      [r - 3, r - 2, r - 1, r].map(
+        x({ size: i, selected: n, shades: o, changePage: d })
+      )
+    ] }),
+    /* @__PURE__ */ c.jsx(A, { iconSize: s, shades: o, setNextPage: t })
+  ] }) : /* @__PURE__ */ c.jsxs(M, { onKeyDown: m, tabIndex: "0", isDisabled: j, children: [
+    /* @__PURE__ */ c.jsx(w, { iconSize: s, shades: o, setPrevPage: f }),
+    /* @__PURE__ */ c.jsxs(y, { size: `${9 * l}rem`, children: [
+      h(1, 3).map(x({ size: i, selected: n, shades: o, changePage: d })),
+      I(),
+      [n - 1, n, n + 1].map(
+        x({ size: i, selected: n, shades: o, changePage: d })
+      ),
+      I(),
+      [r - 1, r].map(
+        x({ size: i, selected: n, shades: o, changePage: d })
+      )
+    ] }),
+    /* @__PURE__ */ c.jsx(A, { iconSize: s, shades: o, setNextPage: t })
+  ] });
+};
+export {
+  k as default
+};

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

@@ -0,0 +1,24 @@
+const _ = "small", I = "medium", E = "large", M = {
+  [_]: 1.9,
+  [I]: 2.6,
+  [E]: 3.1
+}, S = {
+  [_]: 1,
+  [I]: 1.2,
+  [E]: 1.4
+}, L = {
+  [_]: 18,
+  [I]: 19,
+  [E]: 20
+}, t = "selected_bg", N = "not_selected_bg", A = "active_not_selected_bg";
+export {
+  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/dist/src/components/Pagination/helpers.js

@@ -0,0 +1,32 @@
+import { j as r } from "../../../_virtual/jsx-runtime.js";
+import s from "../Ripple/Ripple.js";
+import { FONT_SIZE_MAPPING as x, SIZE_REM_MAPPING as h } from "./constants.js";
+import { ClickableChevronLeft as j, Page as p, ClickableChevronRight as C, P as t } from "./styles.js";
+const R = ({ size: e, selected: i, shades: n, changePage: c }) => (o) => {
+  const l = h[e], m = x[e], d = () => {
+    c(o);
+  };
+  return /* @__PURE__ */ r.jsx(
+    p,
+    {
+      "data-testid": i === o ? "current-page" : `test-${o}`,
+      isSelected: i === o,
+      onClick: d,
+      shades: n,
+      individualRemSize: l,
+      fontRemSize: m,
+      children: o
+    },
+    `page_${o}`
+  );
+}, u = () => /* @__PURE__ */ r.jsxs(r.Fragment, { children: [
+  /* @__PURE__ */ r.jsx(t, { children: "." }),
+  /* @__PURE__ */ r.jsx(t, { children: "." }),
+  /* @__PURE__ */ r.jsx(t, { children: "." })
+] }), N = ({ iconSize: e, shades: i, setPrevPage: n }) => /* @__PURE__ */ r.jsx(s, { rippleColor: i.m50, children: /* @__PURE__ */ r.jsx(j, { size: e, onClick: n }) }), S = ({ iconSize: e, shades: i, setNextPage: n }) => /* @__PURE__ */ r.jsx(s, { rippleColor: i.m50, children: /* @__PURE__ */ r.jsx(C, { size: e, onClick: n }) });
+export {
+  S as NextArrow,
+  N as PrevArrow,
+  R as renderPageNum,
+  u as renderThreeDots
+};

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

@@ -0,0 +1,75 @@
+import o, { css as i } from "../../../node_modules/styled-components/dist/styled-components.browser.esm.js";
+import a from "../Icons/ChevronLeft/ChevronLeft.js";
+import f from "../Icons/ChevronRight/ChevronRight.js";
+import c from "../../colors/grey.js";
+import n from "../../colors/white.js";
+import d from "../../colors/black.js";
+import { SELECTED_BG as m, NOT_SELECTED_BG as l, ACTIVE_NOT_SELECTED_BG as s } from "./constants.js";
+const t = (r) => ({ shades: e }) => {
+  if (["#FFFFFF"].includes(e))
+    return d.m900;
+  if (r === m)
+    return e.m500;
+  if (r === l)
+    return e.m50;
+  if (r === s)
+    return e.m100;
+}, E = o.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 0.6rem;
+  min-width: 100%;
+  width: 100%;
+
+  ${({ isDisabled: r }) => r && i`
+      pointer-events: none;
+      opacity: 0.4;
+    `};
+`, b = o.div`
+  height: ${({ individualRemSize: r }) => `${r}rem`};
+  width: ${({ individualRemSize: r }) => `${r}rem`};
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  justify-content: center;
+  text-align: center;
+  font-size: ${({ fontRemSize: r }) => r}rem;
+  ${({ isSelected: r }) => r ? i`
+          cursor: auto;
+          color: ${n};
+          background-color: ${t(m)};
+        ` : i`
+          cursor: pointer;
+          color: ${c.m500};
+
+          &:hover {
+            background-color: ${t(l)};
+          }
+
+          &:active {
+            background-color: ${t(s)};
+            color: ${n};
+          }
+        `}
+`, y = o.p`
+  color: ${c.m500};
+`, k = o(a)`
+  cursor: pointer;
+`, w = o(f)`
+  cursor: pointer;
+`, x = o.div`
+  min-width: ${({ size: r }) => r};
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+`;
+export {
+  E as AllPages,
+  k as ClickableChevronLeft,
+  w as ClickableChevronRight,
+  x as MiddleLayer,
+  y as P,
+  b as Page
+};

package/dist/src/components/Ripple/Ripple.js

@@ -0,0 +1,26 @@
+import { j as m } from "../../../_virtual/jsx-runtime.js";
+import { useRef as d } from "react";
+/* empty css           */
+const x = ({ children: s, rippleColor: l = "rgba(0,0,0,0.3)", className: p = "", ...c }) => {
+  const r = d(null), a = (o) => {
+    const n = r.current;
+    if (!n) return;
+    const e = document.createElement("span");
+    e.className = "ripple", e.style.backgroundColor = l;
+    const t = n.getBoundingClientRect(), i = Math.max(t.width, t.height);
+    e.style.width = e.style.height = `${i}px`, e.style.left = `${o.clientX - t.left - i / 2}px`, e.style.top = `${o.clientY - t.top - i / 2}px`, n.appendChild(e), e.addEventListener("animationend", () => e.remove());
+  };
+  return /* @__PURE__ */ m.jsx(
+    "div",
+    {
+      ref: r,
+      onClick: a,
+      className: `ripple-container ${p}`,
+      ...c,
+      children: s
+    }
+  );
+};
+export {
+  x as default
+};

package/dist/src/components/Ripple/index.js

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

package/dist/src/index.js

@@ -0,0 +1,10 @@
+import { default as r } from "./colors/index.js";
+import { default as a } from "./components/Icons/ChevronLeft/ChevronLeft.js";
+import { default as l } from "./components/Icons/ChevronRight/ChevronRight.js";
+import { default as d } from "./components/Pagination/Pagination.js";
+export {
+  a as ChevronLeft,
+  l as ChevronRight,
+  d as Pagination,
+  r as colors
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "meticulous-ui",
-  "version": "1.0.14",
+  "version": "1.0.15",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "repository": {