meticulous-ui 1.1.6 → 1.1.8

package/components/Toast/constants.js

@@ -0,0 +1,34 @@
+import m from "../../colors/green.js";
+import o from "../../colors/orange.js";
+import r from "../../colors/red.js";
+import n from "../../colors/blue.js";
+const i = "success", s = "warning", e = "info", t = "error", c = {
+  main: n.m500,
+  side: n.m100,
+  bg: n.m50
+}, b = {
+  [i]: {
+    main: m.m500,
+    side: m.m100,
+    bg: m.m50
+  },
+  [s]: {
+    main: o.m500,
+    side: o.m100,
+    bg: o.m50
+  },
+  [e]: c,
+  [t]: {
+    main: r.m500,
+    side: r.m100,
+    bg: r.m50
+  }
+};
+export {
+  b as COLOR_MAP,
+  t as ERROR,
+  e as INFO,
+  c as INFO_COLORS,
+  i as SUCCESS,
+  s as WARNING
+};

package/components/Toast/helpers.js

@@ -0,0 +1,17 @@
+import { j as t } from "../../_virtual/jsx-runtime.js";
+import { ERROR as e, SUCCESS as s } from "./constants.js";
+import c from "../Icons/Close/Close.js";
+import f from "../Icons/Check/Check.js";
+import m from "../Icons/Info/Info.js";
+import { Outer as u, OuterChild as x, LogoContainer as g, Icon as j } from "./styles.js";
+const l = (o, r) => o === e ? /* @__PURE__ */ t.jsx(c, { size: 16, color: r }) : o === s ? /* @__PURE__ */ t.jsx(f, { size: 18, color: r }) : /* @__PURE__ */ t.jsx(m, { size: 22, color: r }), C = (o) => o === e ? 1 : o === s ? 1.1 : 1.3, S = ({ type: o, $main: r, $side: i }) => {
+  const n = l(o, r);
+  return /* @__PURE__ */ t.jsxs(u, { $side: i, children: [
+    /* @__PURE__ */ t.jsx(x, { $main: r }),
+    /* @__PURE__ */ t.jsx(g, { $main: r, type: o }),
+    /* @__PURE__ */ t.jsx(j, { size: C(o), children: n })
+  ] });
+};
+export {
+  S as Logo
+};

package/components/Toast/index.js

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

package/components/Toast/styles.js

@@ -0,0 +1,124 @@
+import o, { keyframes as s, css as e } from "../../node_modules/styled-components/dist/styled-components.browser.esm.js";
+import i from "../../colors/white.js";
+import n from "../Icons/Close/Close.js";
+import a from "../../colors/grey.js";
+import { WARNING as d } from "./constants.js";
+const m = s`
+  from {
+    opacity: 0;
+    transform: translateX(100%); /* Start off-screen to the right */
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0); /* Move to its final position */
+  }
+`, l = s`
+  from {
+    opacity: 1;
+    transform: translateX(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateX(100%); /* Move off-screen to the right */
+  }
+`;
+o.div`
+  position: fixed;
+  top: 1rem;
+  right: 2rem;
+  z-index: 9999;
+
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+`;
+const u = o.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background-color: ${({ $bg: t }) => t};
+  height: 4.8rem;
+  width: 28rem;
+  border-radius: 0.8rem;
+  padding: 0.4rem 1.6rem;
+  box-shadow: rgba(0, 0, 0, 0.14) 0px 3px 8px;
+  transition: all 0.5s ease;
+
+  &.fade-in {
+    opacity: 1;
+    animation: ${m} 0.5s ease-out forwards; /* slide down + fade */
+  }
+
+  &.fade-out {
+    opacity: 0;
+    animation: ${l} 0.5s ease-in forwards; /* slide right */
+  }
+`, b = o.div`
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background-color: ${i};
+
+  ${({ type: t, $main: r }) => t === d ? e`
+          top: 48%;
+          border-color: ${r} ${r} ${i} ${r};
+          border-style: solid;
+          border-width: 0 0.9rem 1.4rem 0.9rem;
+          height: 0;
+          width: 0;
+        ` : e`
+          top: 50%;
+          width: 1.8rem;
+          height: 1.8rem;
+          border-radius: 50%;
+        `}
+`, w = o.div`
+  position: relative;
+  width: 4rem;
+  height: 4rem;
+  border-radius: 50%;
+  background-color: ${({ $side: t }) => t};
+`, y = o.div`
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: ${({ size: t }) => t}rem;
+  height: ${({ size: t }) => t}rem;
+`, $ = o.div`
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 3rem;
+  height: 3rem;
+  border-radius: 50%;
+  background-color: ${({ $main: t }) => t};
+`, v = o(n)`
+  cursor: pointer;
+`, x = o.div`
+  font-weight: 600;
+  font-size: 1.2rem;
+  color: ${a.m800};
+`, k = o.div`
+  display: flex;
+  flex-direction: column;
+  gap: 0.2rem;
+  width: 21rem;
+`, C = o.div`
+  font-weight: 400;
+  font-size: 1rem;
+  color: ${a.m700};
+`;
+export {
+  v as CloseWrapper,
+  y as Icon,
+  b as LogoContainer,
+  k as Message,
+  w as Outer,
+  $ as OuterChild,
+  C as Subtitle,
+  x as Title,
+  u as ToastWrapper
+};

package/index.js

@@ -0,0 +1,12 @@
+import { default as t } from "./components/Pagination/Pagination.js";
+import { default as e } from "./components/Toast/Toast.js";
+import { default as s } from "./colors/index.js";
+import { default as u } from "./utils/index.js";
+import { default as m } from "./components/Icons/index.js";
+export {
+  t as Pagination,
+  e as Toast,
+  s as colors,
+  m as icons,
+  u as utils
+};

package/package.json

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

package/utils/capFirstLetter.js

@@ -0,0 +1,4 @@
+const t = (e) => typeof e != "string" || e.length === 0 ? e : e.charAt(0).toUpperCase() + e.slice(1);
+export {
+  t as default
+};

package/utils/compose.js

@@ -0,0 +1,4 @@
+const s = (...e) => (o) => e.reduceRight((t, c) => c(t), o);
+export {
+  s as default
+};

package/utils/hasEqualProps.js

@@ -0,0 +1,7 @@
+import o from "../node_modules/lodash-es/omitBy.js";
+import r from "../node_modules/lodash-es/isFunction.js";
+import m from "../node_modules/lodash-es/isEqual.js";
+const f = (t, i) => m(o(t, r), o(i, r));
+export {
+  f as default
+};

package/utils/isNonEmptyArray.js

@@ -0,0 +1,4 @@
+const t = (r) => Array.isArray(r) && r.length > 0;
+export {
+  t as default
+};

package/dist/index.js

@@ -1,10 +0,0 @@
-import { default as t } from "./components/Pagination/Pagination.js";
-import { default as e } from "./colors/index.js";
-import { default as s } from "./utils/index.js";
-import { default as u } from "./components/Icons/index.js";
-export {
-  t as Pagination,
-  e as colors,
-  u as icons,
-  s as utils
-};