meticulous-ui 1.7.3 → 1.8.0

package/README.md

@@ -57,6 +57,7 @@ export default App;
 | `Input`       | Renders input box to let user enter input   |
 | `Dropdown`    | Renders dropdown to select from options     |
 | `Spinner`     | Renders a spinner to show the loading state |
+| `Button`      | Renders a button to click & take an action  |
 
 ## 📦 Icon Components
 

package/components/Button/Button.js

@@ -0,0 +1,53 @@
+import { j as o } from "../../_virtual/jsx-runtime.js";
+import x from "../../node_modules/lodash-es/get.js";
+import C from "../Spinner/Spinner.js";
+import $ from "../../colors/index.js";
+import s from "../../colors/blue.js";
+import { ButtonContainer as g, ButtonWrapper as j, SpinnerWrapper as u, Content as w } from "./styles.js";
+import b from "../Ripple/Ripple.js";
+import v from "../../colors/white.js";
+import I from "../../colors/grey.js";
+import { MEDIUM as B, SIZE as E } from "./constants.js";
+const A = (t) => {
+  const {
+    children: d,
+    theme: r = s,
+    size: h = B,
+    width: i,
+    leftIcon: L,
+    rightIcon: S,
+    isLoading: e
+  } = t || {}, { m400: c, m500: p, m600: a } = x($, r, s), { height: n, width: l, font: f } = E[h] || {}, m = r !== "white" ? v : I.m600;
+  return /* @__PURE__ */ o.jsx(
+    g,
+    {
+      $height: n,
+      $width: i || l,
+      disabled: t.disabled,
+      $isLoading: e,
+      children: /* @__PURE__ */ o.jsx(b, { rippleColor: r.m100, children: /* @__PURE__ */ o.jsx(
+        j,
+        {
+          $hoverColor: p,
+          $activeColor: a,
+          $selectedColor: c,
+          $height: n,
+          $width: i || l,
+          disabled: t.disabled,
+          $isLoading: e,
+          children: e ? /* @__PURE__ */ o.jsx(u, { children: /* @__PURE__ */ o.jsx(C, { size: "small", color: m }) }) : /* @__PURE__ */ o.jsx(
+            w,
+            {
+              $textColor: m,
+              $font: f,
+              children: d
+            }
+          )
+        }
+      ) })
+    }
+  );
+};
+export {
+  A as default
+};

package/components/Button/constants.js

@@ -0,0 +1,29 @@
+const t = "small", h = "medium", o = "large", e = "ex-large", i = {
+  [t]: {
+    height: 2.8,
+    width: 5.25,
+    font: 1
+  },
+  [h]: {
+    height: 3.2,
+    width: 6,
+    font: 1.2
+  },
+  [o]: {
+    height: 3.6,
+    width: 6.75,
+    font: 1.4
+  },
+  [e]: {
+    height: 4,
+    width: 7.5,
+    font: 1.6
+  }
+};
+export {
+  e as EX_LARGE,
+  o as LARGE,
+  h as MEDIUM,
+  i as SIZE,
+  t as SMALL
+};

package/components/Button/index.js

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

package/components/Button/styles.js

@@ -0,0 +1,60 @@
+import e, { css as n } from "../../node_modules/styled-components/dist/styled-components.browser.esm.js";
+import i from "../../colors/grey.js";
+const s = e.button`
+  height: ${({ $height: r }) => r}rem;
+  width: ${({ $width: r }) => r}rem;
+  border-radius: 0.6rem;
+  border: none;
+  padding: 0.6rem 0.4rem;
+  background-color: ${({ $selectedColor: r, disabled: o }) => o ? i.m500 : r};
+  cursor: ${({ disabled: r, $isLoading: o }) => r ? "not-allowed" : o ? "auto" : "pointer"};
+
+  ${({ $isLoading: r }) => r && n`
+      pointer-events: none;
+    `};
+
+  ${({ disabled: r, $isLoading: o }) => !(r || o) && n`
+      &:hover {
+        background-color: ${({ $hoverColor: t }) => t};
+      }
+
+      &:active {
+        background-color: ${({ $activeColor: t }) => t};
+      }
+    `};
+`, m = e.div`
+  font-size: ${({ $font: r }) => r}rem;
+  font-weight: 500;
+  max-width: 100%;
+  overflow: hidden;
+  color: ${({ $textColor: r }) => r};
+`, c = e.div`
+  height: ${({ $height: r }) => r}rem;
+  width: ${({ $width: r }) => r}rem;
+  display: inline-block;
+  position: relative;
+  border-radius: 0.6rem;
+
+  ${({ disabled: r, $isLoading: o }) => !(r || o) && n`
+      box-shadow: 0 0.4rem 1.5rem rgba(0, 0, 0, 0.2);
+      transition:
+        transform 0.2s,
+        box-shadow 0.2s;
+
+      &:hover {
+        box-shadow: 0 0.6rem 2rem rgba(0, 0, 0, 0.3);
+        transform: translateY(-2px);
+      }
+    `};
+`, l = e.div`
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`;
+export {
+  c as ButtonContainer,
+  s as ButtonWrapper,
+  m as Content,
+  l as SpinnerWrapper
+};

package/components/Ripple/Ripple.js

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

package/index.js

@@ -3,18 +3,20 @@ import { default as e } from "./components/Toast/Toast.js";
 import { default as p } from "./components/Spinner/Spinner.js";
 import { default as u } from "./components/OtpInput/OtpInput.js";
 import { default as d } from "./components/Dropdown/Dropdown.js";
-import { default as x } from "./components/Input/Input/Input.js";
-import { default as i } from "./colors/index.js";
-import { default as I } from "./utils/index.js";
-import { default as w } from "./components/Icons/index.js";
+import { default as x } from "./components/Button/Button.js";
+import { default as i } from "./components/Input/Input/Input.js";
+import { default as I } from "./colors/index.js";
+import { default as w } from "./utils/index.js";
+import { default as D } from "./components/Icons/index.js";
 export {
+  x as Button,
   d as Dropdown,
-  x as Input,
+  i as Input,
   u as OtpInput,
   a as Pagination,
   p as Spinner,
   e as Toast,
-  i as colors,
-  w as icons,
-  I as utils
+  I as colors,
+  D as icons,
+  w as utils
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "meticulous-ui",
-  "version": "1.7.3",
+  "version": "1.8.0",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "repository": {
@@ -33,6 +33,7 @@
     "components",
     "pagination",
     "toasts",
+    "button",
     "input",
     "notification",
     "dropdown",