meticulous-ui 1.1.7 → 1.1.8

package/README.md

@@ -47,77 +47,112 @@ export default App;
 
 ## 📦 Components
 
-| Component    | Description                           |
-| ------------ | ------------------------------------- |
-| `Pagination` | Fully responsive pagination component |
+| Component    | Description                             |
+| ------------ | --------------------------------------- |
+| `Pagination` | Fully responsive pagination component   |
+| `Toast`      | Push 4 types of notifications on screen |
 
 ## 📦 Icon Components
 
-| Icons                   | Description                        |
-| ----------------------- | ---------------------------------- |
-| `ChevronLeft`           | Left navigation icon               |
-| `ChevronRight`          | Right navigation icon              |
-| `ChevronUp`             | Up navigation icon                 |
-| `ChevronDown`           | Down navigation icon               |
-| `Add`                   | Add icon                           |
-| `AddCircle`             | Add circle icon                    |
-| `AddCircleFilled`       | Add Circle Filled icon             |
-| `ArrowRight`            | Right Arrow icon                   |
-| `ArrowLeft`             | Left Arrow icon                    |
-| `ArrowUp`               | Up Arrow icon                      |
-| `ArrowDown`             | Down Arrow icon                    |
-| `BellFilled`            | Bell/Notification filled icon      |
-| `BellOffFilled`         | Bell/Notification off filled icon  |
-| `BellOutline`           | Bell/Notification outline icon     |
-| `BellOffOutline`        | Bell/Notification off outline icon |
-| `BookmarkFilled`        | Bookmark filled icon               |
-| `BookmarkOutline`       | Bookmark outline icon              |
-| `ClockCircleOutline`    | Clock circle outline icon          |
-| `ClockSquareOutline`    | Clock square outline icon          |
-| `Close`                 | Close icon                         |
-| `CloseCircleFilled`     | Close circle filled icon           |
-| `CloseCircleOutline`    | Close circle outline icon          |
-| `CommentBubbleFilled`   | Comment bubble filled icon         |
-| `CommentBubbleOutline`  | Comment bubble outline icon        |
-| `CommentFilled`         | Comment filled icon                |
-| `CommentLineFilled`     | Comment line filled icon           |
-| `CommentLineOutline`    | Comment line outline icon          |
-| `CommentOutline`        | Comment outline icon               |
-| `DotsHorizontalFilled`  | Dots horizontal filled icon        |
-| `DotsHorizontalOutline` | Dots horizontal outline icon       |
-| `DotsVerticalFilled`    | Dots vertical filled icon          |
-| `HamburgerMenu`         | Hamburger menu icon                |
-| `HamburgerSpaced`       | Spaced Hamburger icon              |
-| `HeartFilled`           | Heart filled icon                  |
-| `HeartOutline`          | Heart outline icon                 |
-| `HomeFilled`            | Home filled icon                   |
-| `HomeOutline`           | Home outline icon                  |
-| `Link`                  | Link icon                          |
-| `Minus`                 | Minus icon                         |
-| `MinusCircle`           | Minus circle outline icon          |
-| `MinusCircleFilled`     | Minus circle filled icon           |
-| `ProfileFemaleOutline`  | Female profile outline icon        |
-| `ProfileGroupFilled`    | Profiles filled icon               |
-| `ProfileMaleFilled`     | Male profile filled icon           |
-| `ProfileMaleOutline`    | Male profile ouline icon           |
-| `Search`                | Search icon                        |
-| `SettingFilled`         | Setting filled icon                |
-| `SettingOutline`        | Setting outline icon               |
-| `ShareAllFilled`        | Share all filled icon              |
-| `ShareAllOutline`       | Share all outline icon             |
-| `ShareBoxOutline`       | Share box outline icon             |
-| `ShareFilled`           | Share filled icon                  |
-| `ShareOutline`          | Share outline icon                 |
-| `ShareThickFilled`      | Share thick filled icon            |
-| `StarFilled`            | Star filled icon                   |
-| `StarOutline`           | Star outline icon                  |
-| `ThumbsDownFilled`      | Thumbs down filled icon            |
-| `ThumbsDownOutline`     | Thumbs down outline icon           |
-| `ThumbsUpFilled`        | Thumbs up filled icon              |
-| `ThumbsUpOutline`       | Thumbs up outline icon             |
-| `Upload`                | Upload icon                        |
-| `UploadBoxFilled`       | Upload box filled icon             |
-| `UploadBoxOutline`      | Upload box outline icon            |
+| Icons                        | Description                         |
+| ---------------------------- | ----------------------------------- |
+| `Add`                        | Add icon                            |
+| `AddCircle`                  | Add circle icon                     |
+| `AddCircleFilled`            | Add Circle Filled icon              |
+| `ArrowRight`                 | Right Arrow icon                    |
+| `ArrowLeft`                  | Left Arrow icon                     |
+| `ArrowUp`                    | Up Arrow icon                       |
+| `ArrowDown`                  | Down Arrow icon                     |
+| `BellFilled`                 | Bell/Notification filled icon       |
+| `BellOffFilled`              | Bell/Notification off filled icon   |
+| `BellOutline`                | Bell/Notification outline icon      |
+| `BellOffOutline`             | Bell/Notification off outline icon  |
+| `BookmarkFilled`             | Bookmark filled icon                |
+| `BookmarkOutline`            | Bookmark outline icon               |
+| `CartCheckFilled`            | Cart check filled icon              |
+| `CartCheckOutline`           | Cart check outline icon             |
+| `CartCrossFilled`            | Cart cross filled icon              |
+| `CartCrossOutline`           | Cart cross outline icon             |
+| `CartFilled`                 | Cart filled icon                    |
+| `CartMinusFilled`            | Cart minus filled icon              |
+| `CartMinusOutline`           | Cart minus outline icon             |
+| `CartOutline`                | Cart outline icon                   |
+| `CartPlusFilled`             | Cart plus filled icon               |
+| `CartPlusOutline`            | Cart plus outline icon              |
+| `Check`                      | Check icon                          |
+| `ChevronLeft`                | Left navigation icon                |
+| `ChevronRight`               | Right navigation icon               |
+| `ChevronUp`                  | Up navigation icon                  |
+| `ChevronDown`                | Down navigation icon                |
+| `ClockCircleOutline`         | Clock circle outline icon           |
+| `ClockSquareOutline`         | Clock square outline icon           |
+| `Close`                      | Close icon                          |
+| `CloseCircleFilled`          | Close circle filled icon            |
+| `CloseCircleOutline`         | Close circle outline icon           |
+| `CommentBubbleFilled`        | Comment bubble filled icon          |
+| `CommentBubbleOutline`       | Comment bubble outline icon         |
+| `CommentFilled`              | Comment filled icon                 |
+| `CommentLineFilled`          | Comment line filled icon            |
+| `CommentLineOutline`         | Comment line outline icon           |
+| `CommentOutline`             | Comment outline icon                |
+| `ContactDetailsFilled`       | Comment details filled icon         |
+| `ContactDetailsOutline`      | Comment details outline icon        |
+| `DetailsOutline`             | Details outline icon                |
+| `DotsHorizontalFilled`       | Dots horizontal filled icon         |
+| `DotsHorizontalOutline`      | Dots horizontal outline icon        |
+| `DotsVerticalFilled`         | Dots vertical filled icon           |
+| `DotsVerticalOutline`        | Dots vertical outline icon          |
+| `ExitArrowInOutline`         | Exit arrow in outline icon          |
+| `ExitArrowOutOutline`        | Exit arrow out outline icon         |
+| `HamburgerMenu`              | Hamburger menu icon                 |
+| `HamburgerSpaced`            | Spaced Hamburger icon               |
+| `HeartFilled`                | Heart filled icon                   |
+| `HeartOutline`               | Heart outline icon                  |
+| `HomeFilled`                 | Home filled icon                    |
+| `HomeOutline`                | Home outline icon                   |
+| `Info`                       | Info icon                           |
+| `Link`                       | Link icon                           |
+| `LockKeyhole`                | Lock key hole icon                  |
+| `LockKeyholeOutline`         | Lock key hole outline icon          |
+| `LockKeyholeUnlocked`        | Lock key hole unlocked icon         |
+| `LockKeyholeUnlockedOutline` | Lock key hole unlocked outline icon |
+| `Minus`                      | Minus icon                          |
+| `MinusCircle`                | Minus circle outline icon           |
+| `MinusCircleFilled`          | Minus circle filled icon            |
+| `MoneyBagOutline`            | Money bag outline icon              |
+| `MoneyBriefcaseFilled`       | Money briefcase filled icon         |
+| `MoneyBriefcaseOutline`      | Money briefcase outline icon        |
+| `ProfileFemaleOutline`       | Female profile outline icon         |
+| `ProfileGroupFilled`         | Profiles filled icon                |
+| `ProfileMaleFilled`          | Male profile filled icon            |
+| `ProfileMaleOutline`         | Male profile ouline icon            |
+| `RupeeOutlined`              | Rupee ouline icon                   |
+| `RupeeSign`                  | Rupee sign icon                     |
+| `Search`                     | Search icon                         |
+| `SettingFilled`              | Setting filled icon                 |
+| `SettingOutline`             | Setting outline icon                |
+| `ShareAllFilled`             | Share all filled icon               |
+| `ShareAllOutline`            | Share all outline icon              |
+| `ShareBoxOutline`            | Share box outline icon              |
+| `ShareFilled`                | Share filled icon                   |
+| `ShareOutline`               | Share outline icon                  |
+| `ShieldCheckFilled`          | Shield check filled icon            |
+| `ShieldCheckOutline`         | Shield check outline icon           |
+| `ShieldCrossFilled`          | Shield cross filled icon            |
+| `ShieldCrossOutline`         | Shield cross outline icon           |
+| `ShieldWarningFilled`        | Shield warning filled icon          |
+| `ShieldWarningOutline`       | Shield warning outline icon         |
+| `StarFilled`                 | Star filled icon                    |
+| `StarOutline`                | Star outline icon                   |
+| `ThumbsDownFilled`           | Thumbs down filled icon             |
+| `ThumbsDownOutline`          | Thumbs down outline icon            |
+| `ThumbsUpFilled`             | Thumbs up filled icon               |
+| `ThumbsUpOutline`            | Thumbs up outline icon              |
+| `Upload`                     | Upload icon                         |
+| `UploadBoxFilled`            | Upload box filled icon              |
+| `UploadBoxOutline`           | Upload box outline icon             |
+| `WalletFilled`               | Wallet filled icon                  |
+| `WalletOutline`              | Wallet outline icon                 |
 
 ## 📦 Tokens
 
@@ -159,6 +194,8 @@ export default App;
 | `compose`         | Performs right-to-left function composition using transforming function                                        |
 | `hasEqualProps`   | Takes two args: Component’s previous props & its new props; returns true if all-non functional props are equal |
 | `isNonEmptyArray` | Takes an array & returns true if is not empty                                                                  |
+| `randomInt`       | Takes min, max integer & returns random integer between them                                                   |
+| `randomValue`     | Takes min, max value & returns random value between them                                                       |
 
 ## 🌱 Features
 

package/components/Icons/Check/index.js

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

package/components/Icons/Close/index.js

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

package/components/Icons/Info/index.js

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

package/components/Toast/Toast.js

@@ -0,0 +1,43 @@
+import { j as e } from "../../_virtual/jsx-runtime.js";
+import { useState as n, useEffect as c } from "react";
+import T from "../../node_modules/lodash-es/get.js";
+import g from "../../node_modules/lodash-es/noop.js";
+import { Logo as h } from "./helpers.js";
+import C from "../../colors/grey.js";
+import { INFO as S, INFO_COLORS as $, COLOR_MAP as F } from "./constants.js";
+import { ToastWrapper as L, Message as N, Title as R, Subtitle as w, CloseWrapper as I } from "./styles.js";
+const m = (t, o, r) => () => {
+  t(!0), setTimeout(() => {
+    o(!1), r();
+  }, 500);
+}, b = ({
+  type: t = S,
+  visible: o = !0,
+  duration: r = 5,
+  onExpire: i = g,
+  title: p,
+  subtitle: a
+}) => {
+  const [u, s] = n(o), [l, f] = n(!1);
+  c(() => {
+    s(o);
+  }, [o]), c(() => {
+    const O = setTimeout(m(f, s, i), r * 1e3 - 500);
+    return () => {
+      clearTimeout(O);
+    };
+  }, [r, m]);
+  const { main: d, side: j, bg: x } = T(F, t, $);
+  if (u)
+    return /* @__PURE__ */ e.jsxs(L, { $bg: x, className: `${l ? "fade-out" : "fade-in"}`, children: [
+      /* @__PURE__ */ e.jsx(h, { type: t, $main: d, $side: j }),
+      /* @__PURE__ */ e.jsxs(N, { children: [
+        /* @__PURE__ */ e.jsx(R, { children: p }),
+        a && /* @__PURE__ */ e.jsx(w, { children: a })
+      ] }),
+      /* @__PURE__ */ e.jsx(I, { size: 20, color: C.m600, onClick: m(f, s, i) })
+    ] });
+};
+export {
+  b as default
+};

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

@@ -1,10 +1,12 @@
 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";
+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 colors,
-  u as icons,
-  s as utils
+  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.7",
+  "version": "1.1.8",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "repository": {